wake-up-neo.net

Machen Sie Iframe so, dass 100% der verbleibenden Höhe des Containers passen

Ich möchte eine Webseite mit einem Banner und einem Iframe entwerfen. Ich hoffe, dass der iframe die gesamte verbleibende Seitenhöhe ausfüllen kann und automatisch angepasst wird, wenn der Browser die Größe ändert. Ist es möglich, JavaScript-Code nur mit CSS zu schreiben?

Ich habe versucht, height:100% auf iframe zu setzen, das Ergebnis ist ziemlich nahe, aber der iframe hat versucht, die gesamte Seitenhöhe auszufüllen, einschließlich der 30px-Höhe des Banner-div-Elements. Daher wurde eine nicht mehr benötigte vertikale Bildlaufleiste angezeigt. Es ist nicht perfekt. 

Update Notes : Entschuldigen Sie, dass ich die Frage nicht gut beschrieben habe. Ich habe CSS-Marge und Padding-Attribut für DIV ausprobiert, um die gesamte Remining-Höhe einer Webseite erfolgreich zu besetzen, aber der Trick funktionierte nicht bei 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>

Jede Idee wird geschätzt.

213
Darkthread

Der Trick besteht darin zu verstehen, woraus die 100% genommen werden. Das Lesen von CSS-Spezifikationen kann Ihnen dort helfen.

Um es kurz zu machen - es gibt so etwas wie "enthaltender Block" - was nicht das übergeordnete Element ist. Einfach gesagt, ist es das erste Element in der Hierarchie, das Position hat: relativ oder Position: absolut. Oder das Körperelement selbst, wenn nichts anderes da ist. Wenn Sie also "width: 100%" sagen, wird die Breite des "enthaltenden Blocks" geprüft und die Breite Ihres Elements auf dieselbe Größe festgelegt. Wenn dort etwas anderes war, könnte es sein, dass der Inhalt eines "enthaltenden Blocks" größer ist als er selbst (also "überfließend").

Die Höhe funktioniert genauso. Mit einer Ausnahme. Sie können die Höhe des Browserfensters nicht auf 100% einstellen. Das Element der obersten Ebene, gegen das 100% berechnet werden können, ist das Element body (oder html? Nicht sicher), und das reicht gerade so weit, dass es den Inhalt enthält. Die Angabe der Höhe: 100% hat keine Auswirkung, da es kein "übergeordnetes Element" hat, gegen das 100% gemessen werden kann. Fenster selbst zählt nicht. ;)

Um etwas zu 100% aus dem Fenster zu strecken, haben Sie zwei Möglichkeiten:

  1. Verwenden Sie JavaScript
  2. Verwenden Sie nicht DOCTYPE. Dies ist keine gute Praxis, aber es versetzt die Browser in den "Quirks-Modus", in dem Sie height = "100%" für Elemente ausführen können und sie auf die Fenstergröße strecken. Beachten Sie, dass der Rest Ihrer Seite wahrscheinlich auch geändert werden muss, um die Änderungen von DOCTYPE zu berücksichtigen.
</ s>

Update: Ich bin mir nicht sicher, ob ich mich nicht geirrt habe, als ich dies gepostet habe, aber das ist jetzt schon veraltet. Heute können Sie dies in Ihrem Stylesheet tun: html, body { height: 100% } und es wird sich tatsächlich auf den gesamten Viewport erstrecken. Auch bei einem DOKTYP. min-height: 100% kann je nach Situation auch nützlich sein.

Und ich würde niemandem mehr raten, ein Quirks-Modus-Dokument zu erstellen, weil es viel mehr Kopfschmerzen verursacht als löst. Jeder Browser hat einen anderen Quirks-Modus, daher ist es um zwei Größenordnungen schwieriger, eine einheitliche Ansicht Ihrer Seite über Browser hinweg zu erhalten. Verwenden Sie einen DOKTYP. Immer. Vorzugsweise ist der HTML5-<!DOCTYPE html>. Es ist leicht zu merken und wirkt in allen Browsern, auch in den 10-jährigen, wie ein Zauber.

Die einzige Ausnahme ist, wenn Sie etwas wie IE5 oder etwas unterstützen müssen. Wenn du da bist, dann bist du sowieso alleine. Diese uralten Browser sind nicht wie die heutigen Browser, und ein kleiner Ratschlag, der hier gegeben wird, hilft Ihnen dabei. Auf der positiven Seite, wenn Sie dort sind, müssen Sie wahrscheinlich nur eine Art Browser unterstützen, wodurch die Kompatibilitätsprobleme beseitigt werden.

Viel Glück!

Update 2: Hey, es ist lange her! 6 Jahre später sind neue Optionen in der Szene. Ich hatte gerade in den Kommentaren eine Diskussion, hier sind mehr Tricks für Sie, die in heutigen Browsern funktionieren.

Option 1 - absolute Positionierung. Schön und sauber, wenn Sie die genaue Höhe des ersten Teils kennen.

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>

Einige Hinweise - Der second-row-Container ist erforderlich, da bottom: 0 und right: 0 aus irgendeinem Grund nicht mit iframes funktionieren. Etwas damit zu tun, ein "ersetztes" Element zu sein. Aber width: 100% und height: 100% funktionieren gut. display: block ist erforderlich, da es standardmäßig ein inline-Element ist und ansonsten Whitespace seltsame Überläufe erstellt.

Option 2 - Tabellen. Funktioniert, wenn Sie die Höhe des ersten Teils nicht kennen. Sie können entweder tatsächliche <table>-Tags verwenden oder mit display: table auf ausgefallene Weise tun. Ich werde mich für Letzteres entscheiden, weil es heutzutage in Mode zu sein scheint.

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>

Einige Hinweise - der overflow: auto sorgt dafür, dass die Zeile immer den gesamten Inhalt enthält. Andernfalls können schwebende Elemente überlaufen. Der height: 100% in der zweiten Reihe stellt sicher, dass er sich so weit ausdehnt, wie er die erste Reihe so klein wie möglich zusammenquetschen kann.

Option 3 - Flexbox. Der sauberste von allen, aber mit einer weniger als herausragenden Browserunterstützung. IE10 benötigt -ms--Präfixe für die Flexbox-Eigenschaften, und alle weniger unterstützen dies überhaupt nicht.

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>

Einige Hinweise - overflow: hidden ist darauf zurückzuführen, dass der iframe in diesem Fall auch bei display: block eine Art Überlauf erzeugt. Es ist in der Vollbildansicht oder im Snippet-Editor nicht sichtbar, das kleine Vorschaufenster erhält jedoch eine zusätzliche Bildlaufleiste. Keine Ahnung was das ist, wenn Frames komisch sind.

183
Vilx-

Wir verwenden JavaScript, um dieses Problem zu lösen. Hier ist die Quelle.


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;

Hinweis: ifm ist die Iframe-ID

pageY() wurde von John Resig (dem Autor von jQuery) erstellt.

65
MichAdel

Eine andere Möglichkeit wäre, den position: fixed; auf dem übergeordneten Knoten zu verwenden.
Wenn ich mich nicht irre, bindet position: fixed; das Element an das Ansichtsfenster. Sobald Sie diesem Knoten die Eigenschaften width: 100%; und height: 100%; übergeben, wird der gesamte Bildschirm angezeigt. Von diesem Punkt an können Sie das <iframe>-Tag darin einfügen und es mit der einfachen width: 100%; height: 100%;-CSS-Anweisung über den verbleibenden Platz (sowohl in der Breite als auch in der Höhe) verteilen.

Beispielcode


    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>

45
D1SoveR

Sie können dies mit DOCTYPE tun, aber Sie müssen table verwenden. Überprüfen Sie dies heraus:

<!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>
37
ducu

Hier sind einige moderne Ansätze:


  • Ansatz 1 - Kombination von relativen Einheiten des Viewports / calc() .

    Der Ausdruck calc(100vh - 30px) steht für die verbleibende Höhe. Dabei ist 100vh die Höhe des Browsers und die Verwendung von calc() verschiebt effektiv die Höhe des anderen Elements.

    Beispiel hier

    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>

    Unterstützung für calc() hier ; Unterstützung für Viewport-Einheiten hier .


  • Ansatz 2 - Flexbox-Ansatz

    Beispiel hier

    Setzen Sie display des gemeinsamen übergeordneten Elements zusammen mit flex-direction: column auf flex (vorausgesetzt, Sie möchten, dass sich die Elemente übereinander stapeln). Setzen Sie dann flex-grow: 1 für das untergeordnete iframe-Element, damit der verbleibende Speicherplatz gefüllt wird.

    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>

    Da dieser Ansatz weniger Unterstützung hat1Ich würde vorschlagen, mit dem oben genannten Ansatz zu gehen. 

1Obwohl es in Chrome/FF zu funktionieren scheint, funktioniert es nicht in IE (die erste Methode funktioniert in allen aktuellen Browsern).

31
Josh Crozier

Vielleicht wurde dies bereits beantwortet (ein paar Antworten oben sind "richtige" Wege, dies zu tun), aber ich dachte, ich würde auch meine Lösung hinzufügen.

Unser iFrame ist in einem div geladen, daher brauchte ich etwas anderes als window.height. Da unser Projekt bereits stark auf jQuery angewiesen ist, finde ich, dass dies die eleganteste Lösung ist:

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

Wobei natürlich "#middle" die ID des div ist. Das einzige, was Sie noch tun müssen, ist, diese Größenänderung immer dann abzurufen, wenn der Benutzer die Fenstergröße ändert.

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

MichAdel-Code funktioniert für mich, aber ich habe ein paar kleinere Änderungen vorgenommen, damit er richtig funktioniert.

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;
6
asimrafi

Hier ist was ich getan habe. Ich hatte das gleiche Problem und suchte stundenlang im Internet nach Ressourcen.

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

Ich fügte das zum Kopfabschnitt hinzu.

Bitte beachten Sie, dass sich mein iframe in der mittleren Zelle einer Tabelle mit 3 Zeilen und 1 Spalte befindet.

6
Danut Milea

versuche Folgendes:

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

es hat für mich funktioniert 

4
sree

Sie können dies mit html/css wie folgt tun:

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

Ich habe display: table verwendet, um ein ähnliches Problem zu beheben. Es funktioniert fast und hinterlässt eine kleine vertikale Bildlaufleiste. Wenn Sie versuchen, diese flexible Spalte mit etwas anderem als einem iframe zu füllen, funktioniert dies einwandfrei (nicht

Nehmen Sie das folgende HTML

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

Ändern Sie das äußere Div, um display: table zu verwenden, und stellen Sie sicher, dass Breite und Höhe festgelegt sind.

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

Machen Sie das Banner zu einer Tabellenzeile und stellen Sie die Höhe nach Ihren Wünschen ein:

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

Fügen Sie ein zusätzliches Div um Ihren Iframe (oder einen beliebigen Inhalt, den Sie benötigen) hinzu und machen Sie daraus eine Tabellenzeile mit einer Höhe von 100%.

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

Unten ist eine jsfiddle, die es bei der Arbeit zeigt (ohne iframe, weil das in der Geige nicht zu funktionieren scheint)

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

2
daamsie

Neu in HTML5: Verwenden Sie calc (auf Höhe)

<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>
2
Stefan Steiger

Es ist richtig, Sie zeigen einen iframe mit 100% Höhe in Bezug auf den Container: den Körper.

Versuche dies:

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

Ändern Sie natürlich die Höhe des zweiten Div auf die gewünschte Höhe.

2
ARemesal

Ähnliche Antwort von @MichAdel, aber ich verwende JQuery und eleganter.

<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 ist die ID des iframe-Tags

1
Roy Shmuli

Nachdem ich die css-Route eine Weile ausprobiert hatte, schrieb ich etwas in jQuery, das den Job für mich erledigte:

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

Getestet in IE8, Chrome, Firefox 3.6

1
benb

Es funktioniert mit dem unten genannten Code

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

Ich denke, Sie haben hier ein konzeptionelles Problem. Um zu sagen, "Ich habe versucht, die Höhe einzustellen: 100% für den iframe, das Ergebnis ist ziemlich nahe, aber der iframe hat versucht, die gesamte Seite auszufüllen" ?

Sie haben den iframe gebeten, die gesamte Höhe seines Containers (dh des Körpers) auszufüllen, aber leider hat er im <div> einen Geschwister auf Blockebene, über dem Sie 30px groß sind. Die Gesamtmenge des übergeordneten Containers wird nun aufgefordert, die Größe auf 100% + 30px> 100% zu setzen! Daher Bildlaufleisten.

Was ich denke, Sie {Mittelwert ist, dass Sie möchten, dass der Iframe (was übrig bleibt wie Frames und Tabellenzellen verbrauchen kann, d. IIRC gibt es nicht.

Leider gibt es nach meinem besten Wissen keine Möglichkeit, absolute und relative Einheiten effektiv zu mischen/berechnen/subtrahieren. Ich denke, Sie sind auf zwei Optionen beschränkt: 

  1. Positionieren Sie Ihr div unbedingt, was Aus dem Container herausnimmt, so dass Der iframe allein seine Containerhöhe verbraucht. Dies lässt Sie .__ mit allen möglichen anderen Problemen .__, aber vielleicht wäre das, wofür Sie Deckkraft oder Ausrichtung haben, ok

  2. Alternativ müssen Sie eine % -Höhe für das div angeben und die -Höhe des iframe um so viel verkleinern . Wenn die absolute Höhe wirklich Ist, dann müssen Sie .__ anwenden. stattdessen an ein untergeordnetes Element der div

1
annakata

Das Attribut "seamless" ist ein neuer Standard, der dieses Problem lösen soll:

http://www.w3schools.com/tags/att_iframe_s Seamless.asp

Bei der Zuweisung dieses Attributs werden Rahmen und Bildlaufleisten entfernt und der iframe an die Inhaltsgröße . Angepasst. Dies wird jedoch nur in Chrome und der neuesten Safari unterstützt

mehr dazu hier: HTML5 iFrame Seamless Attribute

0
user2254487

oder Sie können Oldschool besuchen und ein Frameset vielleicht verwenden:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
0
Amir Arad

Ich denke, der beste Weg, um dieses Szenario mit CSS-Position zu erreichen. setze die position relativ zu ihrem übergeordneten div und position: absolut zu deinem iframe.

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

css3 calc () ist für andere Padding- und Margin-Ausgaben jetzt sehr fortschrittlich und zum größten Teil auch für alle Browser kompatibel.

check calc ()

0
Jay Patel

Eine einfache jQuery-Lösung

Verwenden Sie dies in einem Skript auf der iframed-Seite

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

}
0
UnLoCo

Wenn Sie Zugriff auf den Inhalt des zu ladenden Iframes haben, können Sie dem übergeordneten Element mitteilen, dass es bei jeder Größenänderung seine Größe ändern soll.

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

Wenn Sie mehr als einen iframe auf der Seite haben, müssen Sie möglicherweise ids oder andere clevere Methoden verwenden, um .find ("iframe") so zu verbessern, dass Sie die richtige auswählen.

0
Stephen

Ich stimme zu, dass JS eine bessere Option ist, aber ich habe eine etwas funktionierende CSS-Lösung. Der Nachteil ist, dass Sie, wenn Sie häufig Inhalte zu Ihrem iframe-HTML-Dokument hinzufügen müssen, einen Durchsatz von einem Prozentpunkt anpassen müssen.

Lösung:

Versuchen Sie ohne Angabe jede Höhe für BEIDE Ihre HTML-Dokumente,

html, body, section, main-div {}

dann nur noch folgendes:

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

hinweis: Das Div sollte dein Hauptabschnitt sein.

Das sollte relativ funktionieren. Der iframe berechnet genau 300% der sichtbaren Fensterhöhe. Wenn der Inhalt des zweiten Dokuments (im iframe) html kleiner als die dreifache Browserhöhe ist, funktioniert er. Wenn Sie dem Dokument nicht regelmäßig Inhalte hinzufügen müssen, ist dies eine dauerhafte Lösung, und Sie können nur den eigenen Prozentsatz entsprechend Ihrer Inhaltshöhe finden.

Dies funktioniert, weil es verhindert, dass das 2. HTML-Dokument (das eingebettete Dokument) seine Höhe vom übergeordneten HTML-Dokument erbt. Dies verhindert, weil wir für beide keine Höhe angegeben haben. Wenn wir dem Kind ein% geben, sucht es nach dem übergeordneten Element. Andernfalls nimmt es die Höhe des Inhalts an. Und nur, wenn die anderen Container keine Höhen haben, wie ich es versucht habe.

0
pixelfe

Sie können dies tun, indem Sie die Körpergröße beim Laden/Ändern der Größe von Ereignissen messen und die Höhe auf (volle Höhe - Bannerhöhe) einstellen.

Beachten Sie, dass Sie derzeit in IE8 Beta2 diese Größenänderung nicht durchführen können, da dieses Ereignis in IE8 Beta2 derzeit fehlerhaft ist.

0
scunliffe

sie können die Höhe des Iframes nicht in% festlegen, da die Körpergröße des übergeordneten Elements nicht 100% beträgt. Legen Sie die Höhe des übergeordneten Elements also auf 100% fest und wenden Sie dann die Höhe des Iframes auf 100% an.

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>
0
Pravin Abhale

Warum machen Sie das nicht (mit geringfügigen Anpassungen für Körperpolsterung/-ränder)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
0
access_granted