wake-up-neo.com

Vollbild-Iframe mit einer Höhe von 100%

Wird die iFrame-Höhe = 100% in allen Browsern unterstützt?

Ich verwende 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 Frame mit fester Höhe von 50px befindet) .__ Wird dies in allen gängigen Browsern (IE/Firefox/Safari) unterstützt?

Auch in Bezug auf Bildlaufleisten, auch wenn ich scrolling="no" sage, sehe ich deaktivierte Bildlaufleisten in Firefox ... Wie kann ich Bildlaufleisten vollständig ausblenden und die Höhe des Iframes automatisch einstellen?

javascripthtmlcssiframehtml-frames
203
testndtv

Sie können Frameset als vorherigen Antwortstatus verwenden. Wenn Sie jedoch auf die Verwendung von iFrames bestehen, 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 blenden Sie das Scrollen mit 2 Alternativen aus:

<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, wird das übergeordnete Element overflow: hidden zum Ausblenden der Bildlaufleisten und der iFrame bis zu 150% Breite und Höhe verwendet, wodurch die Bildlaufleisten außerhalb der Seite gezwungen werden. Bars kann man nicht erwarten, dass der iframe die Grenzen der Seite überschreitet. Dadurch werden die Bildlaufleisten des iFrame mit voller Breite ausgeblendet!

237
Axe

3 Ansätze zum Erstellen eines Vollbilds iframe:

  • Ansatz 1 - Viewport-Prozentlängen

    In unterstützten Browsern können Sie Viewport-Prozentsatzlängen verwenden, z. B. height: 100vh. 

    Dabei steht 100vh für die Höhe des Ansichtsfensters und 100vw für die Breite.

    Beispiel hier

    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>

  • Ansatz 2 - Feste Positionierung

    Dieser Ansatz ist ziemlich unkompliziert. Legen Sie einfach die Position des fixed-Elements fest und fügen Sie einen heightwidth des 100% hinzu.

    _/Beispiel hier

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

  • Ansatz 3

    Für diese letzte Methode setzen Sie einfach die height der bodyhtml/iframe Elemente 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>

149
Josh Crozier

1. Ändern Sie Ihren DOCTYPE auf etwas weniger strenge. 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 (abhängig vom Browser) sicherstellen, dass das übergeordnete Element des iframe eine Höhe hat. Und sein Elternteil. Und sein Elternteil. Usw:

html, body { height: 100%; }
41
Rudie

Ich stieß auf das gleiche Problem, ich zog einen iframe in ein 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 festgelegt werden. Wenn die Quelldatei darauf anspricht (Ihr Frame wird dadurch sehr breit), treten möglicherweise Probleme auf.

27
NotJay

Das hat für mich sehr gut funktioniert (nur wenn iframe-Inhalte von der gleichen 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>
25
Ivan

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

6
Heitor Giacomini

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>

5
khoa

Zusätzlich zu der Antwort von Akshit Soota: Ist es wichtig, die Höhe jedes übergeordneten Elements sowie der Tabelle und column explizit festzulegen, 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>
2
Brabbeldas

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>
2
Tariq Javed

Gemäß https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe sind prozentuale Werte nicht mehr zulässig. Aber das folgende hat für mich funktioniert

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

Obwohl width:100% funktioniert, funktioniert height:100% nicht. Also wurde window.innerHeight verwendet. Sie können auch CSS-Pixel für die Höhe verwenden.

Arbeitscode: Link Arbeitsstelle: Link

1
Agnel Vishal

Hier ist ein kurzer Code. Es verwendet jedoch eine Jquery-Methode, um die aktuelle Fensterhöhe zu ermitteln. Beim Laden von iFrame wird die Höhe des Iframes gleich dem aktuellen Fenster eingestellt. Zum Ändern der Seitengröße verfügt das body-Tag über einen Onresize-Ereignishandler, der die Höhe des Iframes festlegt, wenn die Dokumentgröße 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 Arbeitsprobe: http://jsbin.com/soqeq/1/

1
BraveNewMath

Folgendes getestetes Arbeiten

<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>
1
Uma Shankar Goel

Nur das hat für mich funktioniert (aber für "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);" ....
0
T.Todua

http://embedresponsively.com/

Dies ist eine großartige Ressource und hat sehr gut funktioniert, die wenigen Male, in denen ich sie verwendet habe. Erzeugt 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>
0
Tom Witherington

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

Das eingebettete Video füllt den gesamten viewport-Bereich, wenn die Seite geladen wird

Schöner Ansatz für Landing Pages mit Video oder eingebetteten Inhalten. Unterhalb des eingebetteten Videos können Sie zusätzlichen Inhalt anzeigen, der beim Blättern 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>

0
D.A.H