Iframe layar penuh dengan ketinggian 100%

238

Apakah tinggi iframe = 100% didukung di semua browser?

Saya menggunakan DOCTYPE sebagai:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dalam kode iframe saya, jika saya katakan:

<iframe src="xyz.pdf" width="100%" height="100%" />

Maksud saya apakah ini akan benar-benar mengambil ketinggian halaman yang tersisa (karena ada bingkai lain di atas dengan ketinggian tetap 50px) Apakah ini didukung di semua browser utama (IE / Firefox / Safari)?

Juga mengenai scrollbar, meskipun saya katakan scrolling="no", saya bisa melihat scrollbar yang dinonaktifkan di Firefox ... Bagaimana saya menyembunyikan scrollbar sepenuhnya dan mengatur tinggi iframe secara otomatis?

javascript html css iframe html-frames testndtv
sumber
14
Lihat sebenarnya saya tidak memiliki semua browser diinstal .. Juga versi yang berbeda .. juga hanya ingin memastikan bahwa itu adalah jenis standar ..
testndtv
1
Anda juga bisa mencobanya di validator css.
Ruben
6
Ya, itu tidak memberikan kesalahan / peringatan ... Tapi pertanyaan saya adalah apakah semua browser benar-benar menerapkan ketinggian 100%?
testndtv
Bagi saya jawaban ini bekerja dengan baik: stackoverflow.com/questions/5272519/...
Zied Hamdi

Jawaban:

276

Anda dapat menggunakan frameset sebagai status jawaban sebelumnya tetapi jika Anda bersikeras menggunakan iFrames, 2 contoh berikut ini akan berfungsi:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Sebuah alternatif:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Untuk menyembunyikan gulir dengan 2 alternatif seperti yang ditunjukkan di atas:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Retas dengan contoh kedua:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Untuk menyembunyikan bilah gulir di iFrame, orang tua dibuat overflow: hiddenuntuk menyembunyikan bilah gulir dan iFrame dibuat untuk naik ke 150% lebar dan tinggi yang memaksa bilah gulir di luar halaman dan karena tubuh tidak memiliki bilah gulir orang mungkin tidak mengharapkan iframe melebihi batas halaman. Ini menyembunyikan bilah gulir iFrame dengan lebar penuh!

Kapak
sumber
3
Kedengarannya bagus..Tapi hanya satu pertanyaan ... Mengapa kita perlu menggunakan style = "height: 100%; width: 100%;" ketika kita bagaimanapun mengatakan iframe height = "100%" width = "100%"
testndtv
1
Juga hanya IE yang tidak mengambil ketinggian 100% (membutuhkan sekitar 200px ht) ... FF dan Safri mengambil semua ketinggian yang tersisa ..
testndtv
@ Boris Zbarsky Ya, terima kasih telah memberi tahu saya! Saya telah memperbarui pos sekarang !! @ hmthr Pertanyaan pertama Anda yang terkait dengan tag ganda adalah karena browser sebelumnya mengambil tag "tinggi" dan "lebar" tetapi tidak bekerja dengan baik dengan tag gaya! Tentang bug IE, saya lebih suka Anda tetap dengan kode pertama untuk kasus itu.
Kapak
15
Untuk mendapatkan iframe agar dapat menggunakan 100% dengan benar, orang tua harus 100%. Dalam dokumen yang lebih baru, html dan tag tubuh tidak secara otomatis 100%. Ketika saya menambahkan tinggi: 100% untuk html dan tubuh maka itu bekerja dengan sempurna. Jadi, jawaban yang benar untuk pertanyaan itu, saya pikir, adalah jawaban dari Rudie, kecuali bahwa saya harus menyimpan xtml doctype saya. Perhatikan juga bahwa aturan overflow tidak diperlukan. Scrollbar kemudian berfungsi sebagaimana dimaksud - secara otomatis.
Spiralis
3
Jawaban SO ini juga sangat singkat dan menyenangkan.
Uwe Keim
164

3 pendekatan untuk membuat layar penuh iframe:

  • Pendekatan 1 - Panjang viewport-persentase

    Di browser yang didukung , Anda dapat menggunakan panjang viewport-persentase seperti height: 100vh.

    Di mana 100vhmewakili ketinggian viewport, dan juga 100vwmewakili lebar.

    Contoh Di Sini

    body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
    <iframe></iframe>
    Luaskan cuplikan

  • Pendekatan 2 - Memperbaiki posisi

    Pendekatan ini cukup mudah. Hanya mengatur posisi dari fixedelemen dan menambahkan height/ widthdari 100%.

    Contoh Di Sini

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Luaskan cuplikan

  • Pendekatan 3

    Untuk metode terakhir ini, hanya mengatur heightdari body/ html/ iframeelemen untuk 100%.

    Contoh Di Sini

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Luaskan cuplikan

Josh Crozier
sumber
4
Saya akhirnya menggunakan variasi opsi 1 ... Saya menggunakan lebar: 100% dan tinggi: 100vh karena sumber yang saya tarik cukup lebar dan iframe terkandung dalam div. Solusi yang sangat baik. Terima kasih.
NotJay
2
menambahkan display: blockmelakukan trik untuk mencegah memiliki bilah gulir ganda
KavenG
45

1. Ubah DOCTYPE Anda menjadi sesuatu yang kurang ketat. Jangan gunakan XHTML; ini konyol. Cukup gunakan doctype HTML 5 dan Anda bagus:

<!doctype html>

2. Anda mungkin perlu memastikan (tergantung pada browser) bahwa orang tua iframe memiliki ketinggian. Dan orang tuanya. Dan orang tuanya. Dll:

html, body { height: 100%; }
Rudie
sumber
9
Bagian penting di sini bagi saya adalah bahwa html dan tag tubuh membutuhkan tinggi: 100%. Terima kasih.
Spiralis
1
Mengatur tubuh saja berfungsi di Chrome, tetapi tidak di peramban lain.
Dingle
Berikut adalah 2 pendekatan alternatif .
Josh Crozier
36

Saya mengalami masalah yang sama, saya menarik iframe ke div. Coba ini:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

Ketinggian diatur ke 100vh yang merupakan singkatan dari tinggi viewport. Selain itu, lebarnya dapat diatur ke 100vw, meskipun Anda mungkin akan mengalami masalah jika file sumber responsif (frame Anda akan menjadi sangat lebar).

NotJay
sumber
3
seamless tidak didukung di browser apa pun sejauh yang saya tahu
VisualBean
1
Setelah menghabiskan lebih banyak waktu daripada yang saya mau akui gelisah dengan masalah ini, ini PERSIS apa yang saya butuhkan. Kecuali alih-alih situs web, saya menggunakan file HTML lain, yang membutuhkan sedikit penyesuaian pada ketinggian viewport dan sekarang lebih baik. Terima kasih!
Thomas Jacobs
29

Ini bekerja dengan sangat baik bagi saya (hanya jika konten iframe berasal dari domain yang sama ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Ivan
sumber
21
Ini hanya akan berfungsi jika iframe srcberada pada domain yang sama dengan halaman induk, jika tidak Anda akan mendapatkan izin ditolak kesalahan contentWindow.document.
wolfyuk
Butuh sedikit untuk membuat ini berfungsi di dalam Wordpress, saya baru saja menambahkan kode pendek di plugin saya. BEKERJA SEPERTI PEKERJAAN.
Andy
Berhasil. tetapi masalahnya adalah bahwa itu tidak akan menghitung ulang ketinggian pada setiap postback iframe dalam. Apakah ada solusi?
Behrouz.M
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
Luaskan cuplikan

khoa
sumber
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

Heitor Giacomini
sumber
4

Berikut ini diuji coba

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Uma Shankar Goel
sumber
1
Ada 14 jawaban lain di sini. Dapatkah Anda menjelaskan bagaimana jawaban Anda lebih baik atau setidaknya berbeda dari 14 jawaban lainnya?
Stephen Rauch
2

Tambahan untuk jawaban Akshit Soota: impor dan untuk secara eksplisit mengatur ketinggian setiap elemen induk, juga dari tabel dan kolom jika ada:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
Brabbeldas
sumber
2

Anda pertama kali menambahkan css

html,body{
height:100%;
}

Ini akan menjadi html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
Tariq Javed
sumber
1

Berikut ini adalah kode ringkas. Itu bergantung pada metode jquery untuk menemukan ketinggian jendela saat ini. Saat memuat iFrame, ia menetapkan tinggi iframe sama dengan jendela saat ini. Kemudian untuk menangani pengubahan ukuran halaman, tag body memiliki event handler onresize yang menetapkan tinggi iframe setiap kali dokumen diubah ukurannya.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

inilah contoh yang berfungsi: http://jsbin.com/soqeq/1/

BraveNewMath
sumber
0

Cara lain untuk membangun layar penuh cairan iframe:

Video tertanam mengisi seluruh viewport area saat halaman dimuat

Pendekatan yang bagus untuk halaman arahan dengan video atau konten yang disematkan. Anda dapat memiliki konten tambahan apa pun di bawah video tertanam, yang terungkap saat menggulir halaman ke bawah.

Contoh:

CSS dan kode HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Luaskan cuplikan

DAH
sumber
Harap dicatat, Anda mungkin perlu javascript untuk Firefox. Ada masalah umum dengan ketinggian iframe di Firefox.
DAH
0

http://embedresponsively.com/

Ini adalah sumber yang bagus dan telah bekerja dengan sangat baik, beberapa kali saya menggunakannya. Membuat kode berikut ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Tom Witherington
sumber
0

Hanya ini yang berfungsi untuk saya (tetapi untuk "domain-sama"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

Anda dapat menggunakan: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

atau 

<iframe .... onload="MakeIframeFullHeight(this);" ....
T.Todua
sumber
0

Sesuai https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , nilai persentase tidak lagi diizinkan. Tetapi yang berikut ini berhasil untuk saya

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Meskipun width:100%berhasil, height:100%tidak berhasil. Jadi window.innerHeightsudah digunakan. Anda juga dapat menggunakan piksel css untuk ketinggian.

Kode kerja: Tautan Situs kerja: Tautan

Agnel Vishal
sumber
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
blueDexter
sumber
0

Anda dapat memanggil fungsi yang akan menghitung hieght tubuh iframe ketika iframe dimuat:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
Tejpal Sharma
sumber