Vollbild-Iframe mit einer Höhe von 100%

238

Wird iframe height = 100% in allen Browsern unterstützt?

Ich benutze doctype als:

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

Wenn ich in meinem Iframe-Code sage:

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

Ich meine, wird es tatsächlich die Höhe der verbleibenden Seite annehmen (da sich oben ein weiterer Rahmen mit einer festen Höhe von 50 Pixel befindet). Wird dies in allen gängigen Browsern (IE / Firefox / Safari) unterstützt?

Auch in Bezug auf Bildlaufleisten, obwohl ich sage scrolling="no", kann ich in Firefox deaktivierte Bildlaufleisten sehen ... Wie kann ich Bildlaufleisten vollständig ausblenden und die Iframe-Höhe automatisch einstellen?

javascript html css iframe html-frames testndtv
quelle
14
Sehen Sie, ich habe nicht alle Browser installiert. Auch verschiedene Versionen. Ich wollte nur sicherstellen, dass es eine Art Standard ist.
testndtv
1
Sie können es auch in einem CSS-Validator versuchen.
Ruben
6
Ja, das gibt keinen Fehler / keine Warnung ... Aber meine Frage ist, ob alle Browser tatsächlich 100% Höhe anwenden.
Testndtv
Für mich hat diese Antwort gut funktioniert: stackoverflow.com/questions/5272519/…
Zied Hamdi

Antworten:

275

Sie können Frameset als vorherigen Antwortstatus verwenden. Wenn Sie jedoch darauf bestehen, iFrames zu verwenden, sollten die beiden folgenden Beispiele funktionieren:

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

Eine Alternative:

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

So verbergen Sie das Scrollen mit 2 Alternativen wie oben gezeigt:

<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 mit dem zweiten Beispiel:

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

Um die Bildlaufleisten des iFrame auszublenden, muss das übergeordnete overflow: hiddenBildlaufleisten ausgeblendet werden, und der iFrame wird auf eine Breite und Höhe von bis zu 150% eingestellt, wodurch die Bildlaufleisten außerhalb der Seite verschoben werden und der Körper keine Bildlaufleisten hat Man kann nicht erwarten, dass der Iframe die Grenzen der Seite überschreitet. Dadurch werden die Bildlaufleisten des iFrame in voller Breite ausgeblendet!

Axt
quelle
3
Hört sich gut an ... Nur eine Frage ... Warum müssen wir style = "height: 100%; width: 100%;" wenn wir sowieso sagen iframe height = "100%" width = "100%"
testndtv
1
Auch nimmt nur IE nicht 100% Höhe (dauert ungefähr 200px ht) ... FF und Safri nehmen die gesamte verbleibende Höhe ..
testndtv
@ Boris Zbarsky Ja, danke, dass du mich das wissen lässt! Ich habe den Beitrag jetzt aktualisiert !! @hmthr Ihre erste Frage zu den Doppel-Tags ist, dass frühere Browser zwar die Tags "height" und "width" verwenden, aber mit den Style-Tags nicht gut funktionieren! In Bezug auf den IE-Fehler würde ich es vorziehen, wenn Sie sich an den ersten Code für diesen Fall halten.
Axt
15
Damit der Iframe 100% richtig verwendet, muss das übergeordnete Element 100% sein. In neueren Doctypes sind HTML und Body-Tag nicht automatisch 100%. Wenn ich Höhe hinzufügte: 100% für HTML und Körper, dann funktionierte es einwandfrei. Die richtige Antwort auf die Frage, denke ich, ist die Antwort von Rudie, außer dass ich meinen xhtml-Doctype beibehalten musste. Beachten Sie auch, dass die Überlaufregeln dann nicht erforderlich sind. Die Bildlaufleisten funktionieren dann wie vorgesehen - automatisch.
Spiralis
3
Diese SO-Antwort ist auch sehr kurz und nett.
Uwe Keim
164

3 Ansätze zum Erstellen eines Vollbilds iframe:

  • Ansatz 2 - Feste Positionierung

    Dieser Ansatz ist ziemlich einfach. Stellen Sie einfach die Position des fixedElements ein und fügen Sie ein height/ widthvon hinzu 100%.

    Beispiel hier

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

  • Ansatz 3

    Für diese letzte Methode setzen Sie einfach die heightder body/ html/ iframeElemente auf 100%.

    Beispiel hier

    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>
    Erweitern Sie das Snippet

Josh Crozier
quelle
4
Am Ende habe ich eine Variante von Option 1 verwendet ... Ich habe Breite: 100% und Höhe: 100 VH verwendet, weil die Quelle, die ich gezogen habe, ziemlich breit war und der Iframe in einem Div enthalten ist. Hervorragende Lösung. Danke dir.
NotJay
2
Hinzufügen display: blockhat den Trick getan, um zu verhindern, dass eine doppelte Bildlaufleiste vorhanden ist
KavenG
45

1. Ändern Sie Ihren DOCTYPE in einen weniger strengen. Verwenden Sie kein XHTML. Es ist dumm. Verwenden Sie einfach den HTML 5-Doctype und Sie sind gut:

<!doctype html>

2. Möglicherweise müssen Sie sicherstellen (abhängig vom Browser), dass das übergeordnete Element des Iframes eine Höhe hat. Und seine Eltern. Und seine Eltern. Etc:

html, body { height: 100%; }
Rudie
quelle
9
Der wichtige Teil hier für mich war, dass das HTML- und Body-Tag eine Höhe von 100% benötigte. Vielen Dank.
Spiralis
1
Das Festlegen nur des Körpers funktioniert in Chrome, jedoch nicht in anderen Browsern.
Dingle
Hier sind 2 alternative Ansätze .
Josh Crozier
36

Ich stieß auf das gleiche Problem, ich zog einen Iframe in einen Div. Versuche dies:

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

Die Höhe ist auf 100 VH eingestellt, was für die Höhe des Ansichtsfensters steht. Die Breite kann auch auf 100 VW eingestellt werden, obwohl Sie wahrscheinlich auf Probleme stoßen, wenn die Quelldatei reagiert (Ihr Frame wird sehr breit).

NotJay
quelle
3
nahtlos wird in keinem Browser unterstützt, soweit ich weiß
VisualBean
1
Nachdem ich mehr Zeit damit verbracht habe, zuzugeben, dass ich mit diesem Problem herumgezappelt habe, ist dies genau das, was ich brauchte. Außer, dass ich anstelle einer Website eine andere HTML-Datei verwendet habe, für die eine geringfügige Anpassung der Höhe des Ansichtsfensters erforderlich war, und jetzt kann es losgehen. Danke dir!
Thomas Jacobs
29

Dies hat bei mir sehr gut funktioniert (nur wenn iframe-Inhalte von derselben Domain stammen ):

<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
quelle
21
Dies funktioniert nur, wenn sich die iframe srcDatei in derselben Domäne wie die übergeordnete Seite befindet. Andernfalls wird der Fehler "Berechtigung verweigert" angezeigt contentWindow.document.
Wolfyuk
Es hat ein wenig gedauert, bis diese Funktion in Wordpress funktioniert hat. Ich habe gerade einen Shortcode in mein Plugin eingefügt. KLAPPT WUNDERBAR.
Andy
Es klappt. Das Problem ist jedoch, dass die Höhe nicht auf jedem inneren Iframe-Postback neu berechnet wird. Gibt es eine Problemumgehung?
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>
Erweitern Sie das Snippet

khoa
quelle
6

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

Heitor Giacomini
quelle
4

Die folgenden Tests funktionieren

<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
quelle
1
Hier gibt es bereits 14 weitere Antworten. Können Sie erklären, wie Ihre Antwort besser ist oder sich zumindest von den 14 anderen unterscheidet?
Stephen Rauch
2

Zusätzlich zur Antwort von Akshit Soota: Es ist wichtig, die Höhe jedes übergeordneten Elements explizit festzulegen, auch der Tabelle und Spalte, falls vorhanden:

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

Sie fügen zuerst CSS hinzu

html,body{
height:100%;
}

Dies wird das HTML sein:

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

Hier ist ein prägnanter Code. Es basiert auf einer Abfragemethode, um die aktuelle Fensterhöhe zu ermitteln. Beim Laden von iFrame wird die Höhe des Iframes auf das aktuelle Fenster eingestellt. Um die Größenänderung der Seite zu handhaben, verfügt das Body-Tag über einen Ereignishandler für die Größenänderung, der die Höhe des Iframes festlegt, wenn die Größe des Dokuments geändert wird.

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

Hier ist ein Arbeitsbeispiel: http://jsbin.com/soqeq/1/

BraveNewMath
quelle
0

Eine andere Möglichkeit, flüssiges Vollbild zu erstellen iframe:

Eingebettetes Video füllt sich vollständig viewport beim Laden der Seite den Bereich aus

Netter Ansatz für Zielseiten mit Videos oder eingebetteten Inhalten. Sie können unten zusätzlichen Inhalt des eingebetteten Videos haben, der beim Scrollen der Seite nach unten angezeigt wird.

Beispiel:

CSS- und HTML-Code.

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>
Erweitern Sie das Snippet

DAH
quelle
Bitte beachten Sie, dass Sie möglicherweise Javascript für Firefox benötigen. Es gibt ein häufiges Problem mit der Iframe-Höhe in Firefox.
DAH
0

http://embedresponsively.com/

Dies ist eine großartige Ressource und hat sehr gut funktioniert, die wenigen Male, die ich sie verwendet habe. Erstellt den folgenden Code ....

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

Nur das hat bei mir funktioniert (aber bei "same-domain"):

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

Sie können entweder verwenden: 

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

oder 

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

Gemäß https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe sind Prozentwerte nicht mehr zulässig. Aber das Folgende hat bei mir funktioniert

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

Funktioniert zwar, width:100%funktioniert height:100%aber nicht. So window.innerHeightwurde verwendet. Sie können auch CSS-Pixel für die Höhe verwenden.

Arbeitscode: Link Arbeitsort: Link

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

</iframe>
blueDexter
quelle
0

Sie können eine Funktion aufrufen, die die Körpergröße des Iframes berechnet, wenn der Iframe geladen wird:

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