Pełny ekran iframe o wysokości 100%

238

Czy wysokość iframe = 100% jest obsługiwana we wszystkich przeglądarkach?

Używam doctype jako:

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

W moim kodzie iframe, jeśli powiem:

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

Mam na myśli, czy rzeczywiście zajmie wysokość pozostałej strony (ponieważ na górze jest inna ramka o stałej wysokości 50 pikseli) Czy jest to obsługiwane we wszystkich głównych przeglądarkach (IE / Firefox / Safari)?

Również w odniesieniu do pasków przewijania, chociaż mówię scrolling="no", widzę wyłączone paski przewijania w przeglądarce Firefox ... Jak całkowicie ukryć paski przewijania i automatycznie ustawić wysokość ramki iframe?

javascript  html  css  iframe  html-frames 
— testndtv
źródło
14
Widzisz, właściwie nie mam zainstalowanych wszystkich przeglądarek ..
— Również
1
Możesz także spróbować w walidatorze css.
— Ruben
6
Tak, to nie daje żadnego błędu / ostrzeżenia ... Ale moje pytanie brzmi: czy wszystkie przeglądarki rzeczywiście stosują wysokość 100%?
— testndtv
Dla mnie ta odpowiedź działała dobrze: stackoverflow.com/questions/5272519/...
— Zied Hamdi

Odpowiedzi:

276

Można użyć zestawu ramek, jak stwierdzono w poprzedniej odpowiedzi, ale jeśli nalega się na użycie ramek iFrames, powinny wystarczyć 2 poniższe przykłady:

<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>

Alternatywa:

<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>

Aby ukryć przewijanie z 2 alternatywami, jak pokazano powyżej:

<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>

Hack z drugim przykładem:

<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>

Aby ukryć paski przewijania w ramce iFrame, element nadrzędny jest overflow: hiddenukrywany, a ramka iFrame ma zwiększać szerokość i wysokość do 150%, co powoduje, że paski przewijania są przesuwane poza stronę, a ponieważ ciało nie ma pasków przewijania nie można oczekiwać, że ramka iframe przekroczy granice strony. Ukrywa paski przewijania ramki iFrame na całej szerokości!

— Topór
źródło
3
Brzmi nieźle ... Tylko jedno pytanie ... Dlaczego potrzebujemy stylu = "wysokość: 100%; szerokość: 100%;" kiedy w każdym razie mówimy iframe height = "100%" width = "100%"
— testndtv
1
Również tylko IE nie przyjmuje 100% wysokości (zajmuje około 200px ht) ... FF i Safri zajmują całą pozostałą wysokość ..
— testndtv
@Boris Zbarsky Tak, dziękuję za poinformowanie mnie o tym! Zaktualizowałem post teraz !! @hmthr Twoje pierwsze pytanie dotyczące podwójnych znaczników dotyczy tego, że wcześniejsze przeglądarki przyjmują znaczniki „wysokość” i „szerokość”, ale nie działają dobrze ze znacznikami stylu! Jeśli chodzi o błąd IE, wolałbym trzymać się pierwszego kodu dla tej sprawy.
— Axe
15
Aby element iframe mógł poprawnie używać 100%, rodzic musi mieć wartość 100%. W nowszych typach dokumentów html i body tag nie są automatycznie w 100%. Kiedy dodałem wysokość: 100% dla HTML i treści, to działało bezbłędnie. Tak więc, poprawna odpowiedź na pytanie, jak sądzę, jest odpowiedzią Rudie, z tym wyjątkiem, że musiałem zachować mój typ xhtml. Pamiętaj też, że reguły przepełnienia nie są wtedy konieczne. Paski przewijania działają wtedy zgodnie z przeznaczeniem - automatycznie.
— Spiralis
3
Ta odpowiedź SO jest również bardzo krótka i miła.
— Uwe Keim
164

3 podejścia do tworzenia pełnego ekranu iframe:

  • Podejście 2 - Naprawiono pozycjonowanie

    To podejście jest dość proste. Wystarczy ustawić pozycję fixedelementu i dodać height/width z 100%.

    Przykład tutaj

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

  • Podejście 3

    Dla tej ostatniej metody, po prostu ustawić heightz body/ html/ iframeelementy100% .

    Przykład tutaj

    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>
    Rozwiń fragment kodu

— Josh Crozier
źródło
4
Skończyło się na odmianie opcji 1 ... Użyłem szerokości: 100% i wysokości: 100vh, ponieważ źródło, które pobierałem, było dość szerokie, a element iframe jest zawarty w div. Doskonałe rozwiązanie Dziękuję Ci.
— NotJay
2
dodanie display: blockzrobiło sztuczkę, aby zapobiec podwójnemu
— paskowi
45

1. Zmień DOCTYPE na coś mniej surowego. Nie używaj XHTML; to jest głupie. Wystarczy użyć typu HTML 5 i jesteś dobry:

<!doctype html>

2. Może być konieczne upewnienie się (w zależności od przeglądarki), że rodzic elementu iframe ma wysokość. I jego rodzic. I jego rodzic. Itp:

html, body { height: 100%; }
— Rudie
źródło
9
Ważną częścią dla mnie było to, że html i tag ciała potrzebowały wysokości: 100%. Dzięki.
— Spiralis
1
Ustawienie tylko body działa w Chrome, ale nie w innych przeglądarkach.
— Dingle
— Josh Crozier
36

Wpadłem na ten sam problem, ciągnąłem iframe do diva. Spróbuj tego:

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

Wysokość jest ustawiona na 100vh, co oznacza wysokość rzutni. Ponadto szerokość można ustawić na 100vw, chociaż prawdopodobnie wystąpią problemy, jeśli plik źródłowy będzie reagować (ramka stanie się bardzo szeroka).

— NotJay
źródło
3
bezproblemowo nie jest obsługiwany w żadnej przeglądarce, o ile mi wiadomo
— VisualBean
1
Po spędzeniu więcej czasu, niż chciałbym przyznać, że bawiłem się tym problemem, DOKŁADNIE tego potrzebowałem. Tyle że zamiast strony internetowej użyłem innego pliku HTML, który wymagał niewielkiej korekty wysokości rzutni i teraz dobrze jest iść. Dziękuję Ci!
— Thomas Jacobs
29

Działa to bardzo dobrze dla mnie (tylko jeśli zawartość iframe pochodzi z tej samej domeny ):

<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
źródło
21
Działa to tylko wtedy, gdy iframe srcjest w tej samej domenie co strona nadrzędna, w przeciwnym razie pojawi się błąd odmowy uprawnień contentWindow.document.
— wolfyuk
Trochę to zajęło, aby to działało w Wordpress, właśnie dodałem krótki kod do mojej wtyczki. DZIAŁA JAK MARZENIE.
— Andy,
To działa. ale problem polega na tym, że nie będzie ponownie obliczać wysokości każdego zwrotnego elementu iframe. Czy istnieje jakieś obejście?
— 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>
Rozwiń fragment kodu

— khoa
źródło
6

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

— Heitor Giacomini
źródło
4

Następujące przetestowane działanie

<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
źródło
1
Jest już 14 innych odpowiedzi tutaj. Czy możesz wyjaśnić, w jaki sposób twoja odpowiedź jest lepsza lub przynajmniej inna niż 14 innych?
— Stephen Rauch,
2

Oprócz odpowiedzi Akshit Soota: ważne jest, aby jawnie ustawić wysokość każdego elementu nadrzędnego, również tabeli i kolumny, jeśli takie istnieją:

<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
źródło
2

Najpierw dodajesz css

html,body{
height:100%;
}

To będzie 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
źródło
1

Oto zwięzły kod. To zależy od metody jquery, aby znaleźć bieżącą wysokość okna. Po załadowaniu iFrame ustawia wysokość ramki iframe na taką samą jak bieżące okno. Następnie, aby obsłużyć zmianę rozmiaru strony, znacznik treści ma moduł obsługi zdarzeń onresize, który ustawia wysokość ramki iframe za każdym razem, gdy zmienia się rozmiar dokumentu.

<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>

Oto działająca próbka: http://jsbin.com/soqeq/1/

— BraveNewMath
źródło
0

Kolejny sposób na zbudowanie płynnego pełnego ekranu iframe:

Osadzone wideo wypełnia całość viewport obszar podczas ładowania strony

Ładne podejście do stron docelowych z wideo lub dowolną zawartością osadzoną. Poniżej możesz umieścić dowolną dodatkową zawartość osadzonego wideo, która jest ujawniana podczas przewijania strony w dół.

Przykład:

CSS i kod 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>
Rozwiń fragment kodu

— DAH
źródło
Uwaga: może być potrzebny JavaScript w przeglądarce Firefox. W Firefoksie występuje powszechny problem z wysokością iframe.
— DAH,
0

http://embedresponsively.com/

To świetny zasób i działał bardzo dobrze, kilka razy go użyłem. Tworzy następujący kod ....

<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
źródło
0

Tylko to zadziałało dla mnie (ale dla „tej samej domeny”):

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)
    })();
}

możesz użyć: 

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

lub 

<iframe .... onload="MakeIframeFullHeight(this);" ....
— T.Todua
źródło
0

Zgodnie z https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe wartości procentowe nie są już dozwolone. Ale następujące działało dla mnie

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

Chociaż width:100%działa, height:100%nie działa. Więcwindow.innerHeight zostało wykorzystane. Możesz także użyć pikseli css dla wysokości.

Działający kod: Link Działająca strona: Link

— Agnel Vishal
źródło
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
źródło
0

Możesz wywołać funkcję, która obliczy wysokość ciała elementu iframe po załadowaniu elementu iframe:

<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
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.