Jadikan Iframe agar sesuai dengan 100% dari tinggi kontener yang tersisa

260

Saya ingin merancang halaman web dengan spanduk dan iframe. Saya harap iframe dapat mengisi semua ketinggian halaman yang tersisa dan diubah ukurannya secara otomatis saat browser mengubah ukuran. Apakah mungkin untuk menyelesaikannya tanpa menulis kode Javascript, hanya dengan CSS?

Saya mencoba mengatur height:100%iframe, hasilnya cukup dekat tetapi iframe mencoba untuk mengisi seluruh halaman, termasuk 30pxketinggian elemen div banner, jadi saya mendapat scrollbar vertikal yang tidak perlu. Itu tidak sempurna.

Perbarui Catatan : Maafkan saya karena tidak menjelaskan pertanyaan dengan baik, saya mencoba margin CSS, atribut padding pada DIV untuk menempati seluruh ketinggian halaman web yang berhasil, tetapi triknya tidak berhasil pada iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
Luaskan cuplikan

Ide apa pun dihargai.

html css iframe Darkthread
sumber

Jawaban:

236

Pembaruan pada tahun 2019

TL; DR: Hari ini pilihan terbaik adalah yang terakhir dalam jawaban ini - flexbox. Semuanya mendukungnya dengan baik dan telah bertahun-tahun. Pergi untuk itu dan jangan melihat ke belakang. Sisa jawaban ini dibiarkan karena alasan historis.

Kuncinya adalah memahami apa yang 100% diambil. Membaca spesifikasi CSS dapat membantu Anda di sana.

Untuk membuat cerita panjang pendek - ada yang namanya "mengandung blok" - yang tidak perlu elemen induk. Sederhananya, itu adalah elemen pertama hingga hierarki yang memiliki posisi: relatif atau posisi: absolut. Atau elemen tubuh itu sendiri jika tidak ada yang lain. Jadi, ketika Anda mengatakan "lebar: 100%", itu memeriksa lebar "blok yang mengandung" dan mengatur lebar elemen Anda ke ukuran yang sama. Jika ada sesuatu yang lain di sana, maka Anda mungkin mendapatkan konten dari "blok berisi" yang lebih besar dari itu sendiri (dengan demikian "meluap").

Tinggi bekerja dengan cara yang sama. Dengan satu pengecualian. Anda tidak bisa mendapatkan tinggi hingga 100% dari jendela browser. Elemen level paling atas, yang bisa dihitung 100%, adalah elemen body (atau html? Tidak yakin), dan yang membentang cukup untuk memuat isinya. Menentukan tinggi: 100% di atasnya tidak akan berpengaruh, karena tidak memiliki "elemen induk" untuk mengukur 100%. Jendela itu sendiri tidak masuk hitungan. ;)

Untuk membuat peregangan sesuatu persis 100% dari jendela, Anda memiliki dua pilihan:

  1. Gunakan JavaScript
  2. Jangan gunakan DOCTYPE. Ini bukan praktik yang baik, tetapi menempatkan browser dalam "mode quirks", di mana Anda dapat melakukan tinggi = "100%" pada elemen dan itu akan meregangkan mereka ke ukuran jendela. Perhatikan, bahwa sisa halaman Anda mungkin harus diubah juga untuk mengakomodasi perubahan DOCTYPE.

Pembaruan: Saya tidak yakin apakah saya sudah salah ketika saya memposting ini, tetapi ini sudah usang sekarang. Hari ini Anda bisa melakukan ini di stylesheet Anda: html, body { height: 100% }dan itu benar-benar akan merentang ke seluruh viewport Anda. Bahkan dengan DOCTYPE. min-height: 100%bisa juga bermanfaat, tergantung situasi Anda.

Dan saya tidak akan menyarankan siapa pun untuk membuat dokumen quirks-mode lagi, karena itu menyebabkan lebih banyak sakit kepala daripada menyelesaikannya. Setiap browser memiliki mode quirks yang berbeda, sehingga membuat halaman Anda terlihat secara konsisten di seluruh browser menjadi lebih sulit. Gunakan DOCTYPE. Selalu. Lebih disukai yang HTML5 - <!DOCTYPE html>. Mudah diingat dan berfungsi seperti pesona di semua browser, bahkan yang berusia 10 tahun.

Satu-satunya pengecualian adalah ketika Anda harus mendukung sesuatu seperti IE5 atau sesuatu. Jika Anda ada di sana, berarti Anda sendirian. Browser kuno itu tidak seperti browser saat ini, dan sedikit saran yang diberikan di sini akan membantu Anda. Sisi baiknya, jika Anda di sana, Anda mungkin hanya perlu mendukung SATU jenis browser, yang menghilangkan masalah kompatibilitas.

Semoga berhasil!

Pembaruan 2: Hei, sudah lama! 6 tahun kemudian, opsi baru muncul. Saya baru saja berdiskusi dalam komentar di bawah ini, berikut adalah lebih banyak trik untuk Anda yang berfungsi di peramban hari ini.

Opsi 1 - penentuan posisi absolut. Bagus dan bersih ketika Anda tahu ketinggian yang tepat dari bagian pertama.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>
Luaskan cuplikan

Beberapa catatan - second-rowwadah diperlukan karena bottom: 0dan right: 0tidak berfungsi pada iframe karena alasan tertentu. Ada hubungannya dengan menjadi elemen "diganti". Tapi width: 100%dan height: 100%berfungsi dengan baik. display: blockdiperlukan karena itu adalah inlineelemen secara default dan spasi putih mulai membuat aliran aneh sebaliknya.

Opsi 2 - tabel. Bekerja ketika Anda tidak tahu ketinggian bagian pertama. Anda dapat menggunakan <table>tag aktual atau melakukannya dengan cara mewah display: table. Saya akan memilih yang terakhir karena sepertinya sedang mode akhir-akhir ini.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>
Luaskan cuplikan

Beberapa catatan - overflow: automemastikan bahwa baris selalu menyertakan semua isinya. Kalau tidak, elemen apung terkadang bisa meluap. Yang height: 100%di baris kedua memastikan itu mengembang sebanyak yang bisa meremas baris pertama sekecil itu.

Opsi 3 - flexbox. Yang terbersih dari semuanya, tetapi dengan dukungan browser yang kurang dari bintang. IE10 akan membutuhkan -ms-awalan untuk properti flexbox, dan apa pun yang kurang tidak akan mendukung sama sekali.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Luaskan cuplikan

Beberapa catatan - overflow: hiddenini karena iframe masih menghasilkan semacam overflow bahkan display: blockdalam kasus ini. Itu tidak terlihat dalam tampilan layar penuh atau editor cuplikan, tetapi jendela pratinjau kecil mendapat bilah gulir tambahan. Tidak tahu apa itu, iframe itu aneh.

Vilx-
sumber
@ sproketboy Yah, ini adalah rekomendasi W3C. Dan itu bahkan bukan yang terburuk, tidak jauh.
John
Jadi apakah kita meletakkan ini di stylesheet halaman IFrame, atau stylesheet halaman induk yang berisi IFrame?
Mathias Lykkegaard Lorenzen
1
Itu luar biasa, terima kasih! Flexbox memang yang paling bersih, tetapi tabelnya juga bagus untuk dipelajari dan tampaknya berfungsi tanpa kelebihan: jsfiddle.net/dmitri14/1uqh3zgx/2
Dmitri Zaitsev
1
Mungkin ada baiknya memindahkan pembaruan terbaru ke atas jawaban ini. Saya harus melalui semuanya untuk mendapatkan jawaban terbaik, flexbox.
forgivenson
2
@forgivenson - Cukup benar. Menambahkan catatan di awal jawaban ini.
Vilx-
68

Kami menggunakan JavaScript untuk menyelesaikan masalah ini; di sini adalah sumbernya.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Catatan: ifmadalah ID iframe

pageY() dibuat oleh John Resig (penulis jQuery)

MichAdel
sumber
50

Cara lain untuk melakukannya adalah dengan menggunakan position: fixed;simpul orangtua.
Jika saya tidak salah, position: fixed;mengikat elemen ke viewport, sehingga, setelah Anda memberikan node width: 100%;dan height: 100%;properti ini, itu akan menjangkau seluruh layar. Dari titik ini, Anda dapat meletakkan <iframe>tag di dalamnya dan merentangkannya di atas ruang yang tersisa (baik lebar dan tinggi) dengan mudahwidth: 100%; height: 100%; instruksi CSS .

Kode contoh

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
Luaskan cuplikan

D1SoveR
sumber
1
Bagaimana ini mengambil ketinggian "tersisa" ..?
EricG
3
Saya perhatikan Anda juga perlu menambahkan position: fixediframe.
0xF
terima kasih, perbaiki ketinggian laporan SSR saya, bunuh diri dihindari untuk hari lain.
Mike D
1
tidak ada scrollbar terlihat
andrej
sempurna - dapatkah Anda menjelaskan css '>' mis. div # root> iframe lebih lanjut karena saya tidak terbiasa dengan itu dan tidak dapat menemukan referensi
Datadimension
40

Berikut adalah beberapa pendekatan modern:

  • Pendekatan 1 - Kombinasi unit relatif viewport /calc() .

    Ekspresi calc(100vh - 30px)mewakili ketinggian yang tersisa. Di mana 100vhketinggian browser dan penggunaancalc() secara efektif menggantikan ketinggian elemen lainnya.

    Contoh Di Sini

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>
    Luaskan cuplikan

    Dukungan untuk di calc()sini ; dukungan untuk unit relatif viewport di sini .

  • Pendekatan 2 - Pendekatan Flexbox

    Contoh Di Sini

    Setel displayelemen induk yang umum menjadi flex, bersama dengan flex-direction: column( dengan asumsi Anda ingin elemen menumpuk di atas satu sama lain). Kemudian atur elemen flex-grow: 1anak iframeagar mengisi ruang yang tersisa.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    Luaskan cuplikan

    Karena pendekatan ini kurang mendukung 1 , saya sarankan untuk pergi dengan pendekatan yang disebutkan di atas.

1 Meskipun tampaknya bekerja di Chrome / FF, itu tidak berfungsi di IE (metode pertama bekerja di semua browser saat ini).

Josh Crozier
sumber
3
Keduanya berfungsi dan IMO dua opsi yang disebutkan di sini adalah pendekatan terbaik. Saya lebih suka flexboxopsi karena dengan calcAnda perlu tahu jumlah ruang untuk mengurangi dari vh. Dengan flexboxsederhana flex-grow:1lakukan itu.
Kilmazing
39

Anda dapat melakukannya dengan DOCTYPE, tetapi Anda harus menggunakannya table. Lihat ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
ducu
sumber
1
setidaknya tidak perlu js !! tetapi apakah itu web-safe?
Ali Shakiba
1
Kelemahan dengan solusi ini adalah html, body {overflow: hidden;} akan menghapus gulungan halaman.
Ali Shakiba
Saya mencoba menambahkan footer dalam kode di atas tetapi footer tidak muncul. bisakah kamu membantu
Akshay Raut
18

Mungkin ini sudah dijawab (beberapa jawaban di atas adalah cara yang "benar" untuk melakukan ini), tetapi saya pikir saya akan menambahkan solusi saya juga.

IFrame kami dimuat dalam div, maka saya membutuhkan sesuatu yang lain kemudian window.height. Dan melihat proyek kami sudah sangat bergantung pada jQuery, saya menemukan ini menjadi solusi yang paling elegan:

$("iframe").height($("#middle").height());

Di mana tentu saja "#middle" adalah id dari div. Satu-satunya hal tambahan yang perlu Anda lakukan adalah mengingat perubahan ukuran ini setiap kali pengguna mengubah ukuran jendela.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
Tim Geerts
sumber
7

Inilah yang saya lakukan. Saya memiliki masalah yang sama dan akhirnya mencari sumber daya web selama berjam-jam.

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

Saya menambahkan ini ke bagian kepala.

Harap perhatikan bahwa iframe saya terletak di dalam sel tengah tabel yang memiliki 3 baris dan 1 kolom.

Danut Milea
sumber
Kode Anda hanya akan berfungsi baik TD yang berisi IFRAME memiliki tinggi: 100%. Ini akan berfungsi jika tabel terdapat dalam elemen DIV, karena Anda memiliki gaya untuk semua divs memiliki tinggi: 100%.
Nikola Petkanski
6

Kode MichAdel bekerja untuk saya, tetapi saya membuat beberapa modifikasi kecil agar berfungsi dengan benar.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
asimrafi
sumber
4

Benar, Anda menunjukkan iframe dengan ketinggian 100% terhadap wadahnya: bodi.

Coba ini:

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

Tentu saja, ubah ketinggian div kedua ke ketinggian yang Anda inginkan.

Tema
sumber
8
30px + 90%! = 100%
stepancheg
1
bisa menggunakan calc (100% - 30px) alih-alih 90%
Justin E
4

coba yang berikut ini:

<iframe name="" src="" width="100%" style="height: 100em"/>

itu berhasil untuk saya

sree
sumber
4
Tidak memenuhi induk, hanya menempatkan tinggi di iframe.
Ben
3

Anda dapat melakukan ini dengan html / css seperti ini:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
vdbuilder
sumber
2

Baru di HTML5: Gunakan calc (ketinggian)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
Stefan Steiger
sumber
2

Saya menggunakan display: table untuk memperbaiki masalah yang sama. Ini hampir berfungsi untuk ini, meninggalkan bilah gulir vertikal kecil. Jika Anda mencoba mengisi kolom fleksibel itu dengan sesuatu selain iframe berfungsi dengan baik (tidak

Ambil HTML berikut

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

Ubah div luar untuk menggunakan tampilan: tabel dan pastikan memiliki lebar dan tinggi yang ditetapkan.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

Jadikan spanduk sebagai baris tabel dan atur tingginya sesuai keinginan Anda:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

Tambahkan div tambahan di sekitar iframe Anda (atau konten apa pun yang Anda butuhkan) dan buatlah baris-tabel dengan ketinggian diatur ke 100% (pengaturan tingginya sangat penting jika Anda ingin menanamkan iframe untuk mengisi ketinggian)

.iframe-container {
  display: table-row;
  height: 100%;
}

Di bawah ini adalah jsfiddle yang menunjukkannya di tempat kerja (tanpa iframe karena sepertinya tidak berfungsi di biola)

https://jsfiddle.net/yufceynk/1/

Daamsie
sumber
1

Saya pikir Anda memiliki masalah konseptual di sini. Untuk mengatakan "Saya mencoba mengatur tinggi: 100% pada iframe, hasilnya cukup dekat tetapi iframe mencoba mengisi seluruh halaman" , yah, kapan "100%" tidak sama dengan "keseluruhan"?

Anda telah meminta iframe untuk mengisi seluruh ketinggian wadahnya (yang merupakan bodi) tapi sayangnya ia memiliki saudara kandung level blok di <div> di atas yang Anda minta besar 30px. Jadi total kontainer induk sekarang diminta untuk ukuran hingga 100% + 30px> 100%! Karenanya scrollbar.

Maksud saya maksud Anda adalah bahwa Anda ingin iframe mengkonsumsi apa yang tersisa seperti bingkai dan sel tabel, yaitu height = "*". IIRC ini tidak ada.

Sayangnya sejauh pengetahuan saya tidak ada cara untuk secara efektif mencampur / menghitung / mengurangi unit absolut dan relatif, jadi saya pikir Anda dikurangi menjadi dua opsi:

  1. Benar-benar posisikan div Anda, yang akan mengeluarkannya dari wadah sehingga iframe sendiri akan mengkonsumsi tinggi wadah itu. Ini membuat Anda dengan segala macam masalah lain, tetapi mungkin untuk apa yang Anda lakukan opacity atau alignment akan baik-baik saja.

  2. Atau Anda harus menentukan% tinggi untuk div dan mengurangi ketinggian iframe sebanyak itu. Jika ketinggian absolut benar-benar penting, Anda harus menerapkannya pada elemen anak dari div.

annakata
sumber
1

Setelah mencoba rute css untuk sementara waktu, saya akhirnya menulis sesuatu yang cukup mendasar di jQuery yang melakukan pekerjaan untuk saya:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

Diuji dalam IE8, Chrome, Firefox 3.6

benb
sumber
1

Ini akan bekerja dengan kode yang disebutkan di bawah ini

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
mgr
sumber
1

Jawaban serupa dari @MichAdel, tapi saya menggunakan JQuery dan lebih elegan.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id adalah ID dari tag iframe

Roy Shmuli
sumber
0

Anda dapat melakukan ini dengan mengukur ukuran tubuh saat memuat / mengubah ukuran acara dan mengatur ketinggian ke (tinggi penuh - tinggi spanduk).

Perhatikan bahwa saat ini di IE8 Beta2 Anda tidak dapat melakukan ini onresize karena peristiwa itu saat ini rusak di IE8 Beta2.

scunliffe
sumber
0

atau Anda bisa menjadi old-school dan menggunakan frameset mungkin:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Amir Arad
sumber
2
@vdbuilder: Tidak, ini hanya berlaku pra-html5. Saya yakin itu masih berfungsi. ;-)
TJ Crowder
0

Meskipun saya setuju JS tampaknya merupakan pilihan yang lebih baik, saya punya solusi yang hanya berfungsi untuk CSS. Kelemahannya adalah bahwa jika Anda harus menambahkan konten ke dokumen html iframe Anda sesering mungkin, Anda harus menyesuaikan satu persen dari waktu ke waktu.

Larutan:

Cobalah untuk tidak menentukan ketinggian untuk KEDUA dokumen html Anda,

html, body, section, main-div {}

maka hanya kode ini:

#main-div {height:100%;}
#iframe {height:300%;}

Catatan: div harus menjadi bagian utama Anda.

Ini seharusnya relatif bekerja. iframe benar-benar menghitung 300% dari tinggi jendela yang terlihat. Jika Anda mengambil konten html dari dokumen ke-2 (dalam iframe) lebih kecil daripada 3 kali tinggi browser Anda, itu berfungsi. Jika Anda tidak perlu sering menambahkan konten ke dokumen itu, ini adalah solusi permanen dan Anda bisa menemukan sendiri% yang dibutuhkan sesuai dengan tinggi konten Anda.

Ini berfungsi karena mencegah dokumen html ke-2 (yang tertanam) untuk mewarisi tingginya dari dokumen induk html. Ini mencegahnya karena kami tidak menentukan ketinggian untuk keduanya. Ketika kami memberikan% kepada anak itu mencari orang tuanya, jika tidak, ia membutuhkan tinggi kontennya. Dan hanya jika wadah lain tidak diberi ketinggian, dari apa yang saya coba.

pixelfe
sumber
0

The " mulus " atribut standar baru yang bertujuan untuk memecahkan masalah ini:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Ketika menetapkan atribut ini, itu akan menghapus batas dan gulir bar dan ukuran iframe dengan ukuran kontennya. meskipun hanya didukung di Chrome dan Safari terbaru

lebih lanjut tentang ini di sini: Atribut Seamless HTML5 iFrame

pengguna2254487
sumber
Atribut mulus telah dihapus dari spesifikasi HTML 5.
Eric Steinborn
0

Solusi jQuery sederhana

Gunakan ini dalam skrip di dalam halaman iframed

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
UnLoCo
sumber
0

Anda tidak dapat mengatur tinggi iframe di% karena tinggi badan orang tua Anda tidak 100% sehingga menjadikan tinggi orangtua sebagai 100% dan kemudian menerapkan tinggi iframe 100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
Pravin Abhale
sumber
0

Jika Anda memiliki akses ke konten iframe yang akan dimuat, Anda dapat memberi tahu orang tuanya untuk mengubah ukuran kapan pun ia mengubah ukuran ..

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Jika Anda memiliki lebih dari satu iframe di halaman, Anda mungkin perlu menggunakan id atau metode pintar lainnya untuk meningkatkan .find ("iframe") sehingga Anda memilih yang benar.

Stephen
sumber
0

Saya pikir cara terbaik untuk mencapai skenario ini menggunakan posisi css. atur posisi relatif ke div orang tua Anda dan posisi: mutlak untuk iframe Anda.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
Luaskan cuplikan

untuk masalah padding dan margin lainnya sekarang css3 hari () sangat canggih dan sebagian besar juga kompatibel untuk semua browser.

periksa calc ()

Jay Patel
sumber
0

Mengapa tidak melakukan ini (dengan penyesuaian kecil untuk body padding / margin)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
access_granted
sumber
Anda harus mengganti -0dengan +'px'di akhir. Apakah ini berfungsi di ponsel?
Dmitri Zaitsev