Stellen Sie Iframe so ein, dass es 100% der verbleibenden Höhe des Containers entspricht

260

Ich möchte eine Webseite mit einem Banner und einem Iframe gestalten. Ich hoffe, der Iframe kann die gesamte verbleibende Seitenhöhe ausfüllen und die Größe automatisch ändern, wenn der Browser die Größe ändert. Ist es möglich, dies zu tun, ohne Javascript-Code zu schreiben, nur mit CSS?

Ich habe versucht, height:100%auf iframe zu setzen, das Ergebnis ist ziemlich nahe, aber der iframe hat versucht, die gesamte Seitenhöhe einschließlich der zu füllen30px Höhe des Banner-Div-Elements auszufüllen, sodass ich eine unnötige vertikale Bildlaufleiste bekam. Es ist nicht perfekt.

Update-Hinweise : Entschuldigen Sie, dass ich die Frage nicht gut beschrieben habe. Ich habe versucht, die gesamte verbleibende Höhe einer Webseite mit dem CSS-Rand und dem Auffüllattribut von DIV erfolgreich zu belegen, aber der Trick hat bei iframe nicht funktioniert.

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

Jede Idee wird geschätzt.

html css iframe Darkthread
quelle

Antworten:

236

Update im Jahr 2019

TL; DR: Heute ist die beste Option die letzte in dieser Antwort - Flexbox. Alles unterstützt es gut und hat seit Jahren. Mach das und schau nicht zurück. Der Rest dieser Antwort bleibt aus historischen Gründen.

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

Um es kurz zu machen - es gibt so etwas wie "Block enthalten" - was für das übergeordnete Element nicht erforderlich ist. Einfach gesagt, es ist das erste Element in der Hierarchie, das Position: relativ oder Position: absolut hat. Oder das Körperelement selbst, wenn es nichts anderes gibt. Wenn Sie also "width: 100%" sagen, wird die Breite des "enthaltenden Blocks" überprüft und die Breite Ihres Elements auf dieselbe Größe festgelegt. Wenn dort noch etwas anderes wäre, könnten Sie Inhalte eines "enthaltenden Blocks" erhalten, der größer als er selbst ist (also "überläuft").

Die Höhe funktioniert genauso. Mit einer Ausnahme. Sie können die Höhe des Browserfensters nicht auf 100% bringen. Das Element der obersten Ebene, anhand dessen 100% berechnet werden können, ist das Element body (oder html? Nicht sicher), das sich gerade so weit erstreckt, dass es seinen Inhalt enthält. Festlegen der Höhe: 100% haben keine Auswirkung, da es kein "übergeordnetes Element" gibt, an dem 100% gemessen werden können. Fenster selbst zählt nicht. ;)

Damit sich etwas genau 100% des Fensters ausdehnt, haben Sie zwei Möglichkeiten:

  1. Verwenden Sie JavaScript
  2. Verwenden Sie nicht DOCTYPE. Dies ist keine gute Vorgehensweise, versetzt die Browser jedoch in den "Mackenmodus", in dem Sie für Elemente height = "100%" ausführen können, und streckt sie auf die Fenstergröße. Beachten Sie, dass der Rest Ihrer Seite wahrscheinlich ebenfalls geändert werden muss, um die DOCTYPE-Änderungen zu berücksichtigen.

Update: Ich bin mir nicht sicher, ob ich mich nicht schon geirrt habe, als ich das gepostet habe, aber das ist jetzt sicherlich veraltet. Heute können Sie dies in Ihrem Stylesheet tun: html, body { height: 100% }und es wird sich tatsächlich auf Ihr gesamtes Ansichtsfenster erstrecken. Auch mit einem DOCTYPE. min-height: 100%könnte auch nützlich sein, abhängig von Ihrer Situation.

Und ich würde niemandem mehr raten, ein Dokument im Mackenmodus zu erstellen, da es weitaus mehr Kopfschmerzen verursacht als löst. Jeder Browser hat einen anderen Mackenmodus, sodass es zwei Größenordnungen schwieriger wird, Ihre Seite konsistent über Browser hinweg anzuzeigen. Verwenden Sie einen DOCTYPE. Immer. Am liebsten das HTML5 - <!DOCTYPE html>. Es ist leicht zu merken und wirkt wie ein Zauber in allen Browsern, auch in den 10-jährigen.

Die einzige Ausnahme ist, wenn Sie etwas wie IE5 oder etwas unterstützen müssen. Wenn du da bist, bist du sowieso alleine. Diese alten Browser sind nichts anderes als die heutigen Browser, und nur wenige Ratschläge, die hier gegeben werden, helfen Ihnen dabei. Auf der positiven Seite, wenn Sie dort sind, müssen Sie wahrscheinlich nur EINE Art von 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 auf der Bühne. Ich hatte gerade eine Diskussion in den Kommentaren unten, hier sind weitere Tricks für Sie, die in den 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>
Erweitern Sie das Snippet

Einige Hinweise - das second-rowist Container benötigt , da bottom: 0und right: 0funktioniert nicht auf Iframes aus irgendeinem Grund. Etwas damit zu tun, ein "ersetztes" Element zu sein. Aber width: 100%und height: 100%funktioniert gut. display: blockwird benötigt, weil es eininline standardmäßig Element ist und Leerzeichen ansonsten seltsame Überläufe verursachen.

Option 2 - Tabellen. Funktioniert, wenn Sie die Höhe des ersten Teils nicht kennen. Sie können entweder tatsächliche <table>Tags verwenden oder dies auf ausgefallene Weise tun display: table. 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>
Erweitern Sie das Snippet

Einige Hinweise - das overflow: autostellt sicher, dass die Zeile immer den gesamten Inhalt enthält. Andernfalls können schwimmende Elemente manchmal überlaufen. Dasheight: 100% in der zweiten Reihe stellt sicher, dass es sich so weit wie möglich ausdehnt und die erste Reihe so klein wie möglich drückt.

Option 3 - Flexbox. Der sauberste von allen, aber mit einer weniger als hervorragenden Browser-Unterstützung. IE10 benötigt -ms-Präfixe für die Flexbox-Eigenschaften, und alles andere unterstützt 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>
Erweitern Sie das Snippet

Einige Hinweise - das overflow: hiddenliegt daran, dass der Iframe auch display: blockin diesem Fall immer noch einen Überlauf erzeugt . Es ist in der Vollbildansicht oder im Snippet-Editor nicht sichtbar, aber das kleine Vorschaufenster erhält eine zusätzliche Bildlaufleiste. Keine Ahnung was das ist, iframes sind komisch.

Vilx-
quelle
@sproketboy Nun, es ist eine W3C-Empfehlung. Und es ist noch lange nicht das Schlimmste.
John
Fügen wir dies also in das Stylesheet der IFrame-Seite oder in das Stylesheet der übergeordneten Seite ein, die den IFrame enthält?
Mathias Lykkegaard Lorenzen
1
Das ist großartig, danke! Die Flexbox ist zwar die sauberste, aber die Tabellen sind auch großartig zu lernen und scheinen ohne Überläufe zu funktionieren: jsfiddle.net/dmitri14/1uqh3zgx/2
Dmitri Zaitsev
1
Es könnte sich lohnen, die neuesten Updates an den Anfang dieser Antwort zu setzen. Ich musste das Ganze durchgehen, um die beste Antwort zu erhalten, Flexbox.
Verzeihung
2
@forgivenson - Richtig. Zu Beginn dieser Antwort wurde eine Notiz hinzugefügt.
Vilx
68

Wir verwenden ein 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

MichAdel
quelle
49

Eine andere Möglichkeit, dies zu tun, wäre die Verwendung des position: fixed;übergeordneten Knotens.
Wenn ich mich nicht irre, position: fixed;bindet das Element an das Ansichtsfenster. Sobald Sie diesen Knoten width: 100%;und diese height: 100%;Eigenschaften angegeben haben, erstreckt es sich über den gesamten Bildschirm. Ab diesem Zeitpunkt können Sie das <iframe>Tag einfach darin platzieren und über den verbleibenden Platz (sowohl in der Breite als auch in der Höhe) verteilenwidth: 100%; height: 100%; CSS-Anweisung 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>
Erweitern Sie das Snippet

D1SoveR
quelle
1
Wie nimmt das die "verbleibende" Höhe ..?
EricG
3
Mir ist aufgefallen, dass Sie position: fixeddem Iframe auch etwas hinzufügen müssen .
0xF
Danke, mein SSRS-Bericht wurde korrigiert, Selbstmord für einen weiteren Tag vermieden.
Mike D
1
Es sind keine Bildlaufleisten sichtbar
andrej
perfekt - könnten Sie das CSS erklären '>' zB div # root> iframe ferner, da ich damit nicht vertraut bin und keine Referenz finden kann
Datadimension
40

Hier einige moderne Ansätze:

  • Ansatz 1 - Kombination der relativen Einheiten des Ansichtsfensters / calc().

    Der Ausdruck calc(100vh - 30px)repräsentiert die verbleibende Höhe. Wo 100vhist die Höhe des Browsers und die Verwendung von verschiebt calc()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>
    Erweitern Sie das Snippet

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

  • Ansatz 2 - Flexbox-Ansatz

    Beispiel hier

    Setzen Sie das displaydes gemeinsamen übergeordneten Elements auf flexzusammen mit flex-direction: column(vorausgesetzt, Sie möchten, dass die Elemente übereinander gestapelt werden). Setzen Sie dann flex-grow: 1das untergeordnete iframeElement, damit es den verbleibenden Platz ausfüllt.

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

    Da dieser Ansatz weniger Unterstützung bietet 1 , würde ich empfehlen, den oben genannten Ansatz zu wählen.

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

Josh Crozier
quelle
3
Sowohl Arbeit als auch IMO sind die beiden hier genannten Optionen der beste Ansatz. Ich bevorzuge die flexboxOption, weil calcSie mit wissen müssen, wie viel Platz von der abziehen soll vh. Mit flexboxeinem einfachen flex-grow:1macht es.
Kilmazing
39

Sie können es mit tun DOCTYPE, aber Sie müssen verwenden table. Ü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>
ducu
quelle
1
Zumindest braucht es kein js !! aber ist es web-sicher?
Ali Shakiba
1
Nachteil dieser Lösung ist, dass HTML, body {overflow: hidden;} Seitenschriftrollen entfernt.
Ali Shakiba
Ich versuche, die Fußzeile im obigen Code hinzuzufügen, aber die Fußzeile wird nicht angezeigt. können Sie bitte helfen.
Akshay Raut
18

Vielleicht wurde dies bereits beantwortet (einige der obigen Antworten sind "richtige" Methoden, um dies zu tun), aber ich dachte, ich würde auch nur 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 von jQuery abhängt, finde ich dies die eleganteste Lösung:

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

Wo natürlich "#middle" die ID des Div ist. Das einzige zusätzliche, was Sie tun müssen, ist, diese Größenänderung abzurufen, wenn der Benutzer die Größe des Fensters ändert.

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

Folgendes habe ich getan. 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 habe dies dem Hauptteil hinzugefügt.

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

Danut Milea
quelle
Ihr Code funktioniert nur, wenn der TD mit dem IFRAME eine Höhe von 100% hat. Dies funktioniert, wenn die Tabelle in einem DIV-Element enthalten ist, da Sie einen Stil für alle Divs haben, der eine Höhe von 100% hat.
Nikola Petkanski
6

MichAdel-Code funktioniert für mich, aber ich habe einige geringfügige Änderungen vorgenommen, damit er ordnungsgemäß 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;
Asimrafi
quelle
4

Es ist richtig, Sie zeigen einen Iframe mit 100% Höhe in Bezug auf seinen 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.

ARemesal
quelle
8
30px + 90%! = 100%
stepancheg
1
könnte calc (100% - 30px) anstelle von 90% verwenden
Justin E
4

Versuche Folgendes:

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

es hat bei mir funktioniert

sree
quelle
4
Füllt das übergeordnete Element nicht aus, sondern legt nur eine große Höhe auf den Iframe.
Ben
3

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

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

Ich habe display: table verwendet, um ein ähnliches Problem zu beheben. Es funktioniert fast dafür 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 den folgenden HTML-Code

<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 Tischreihe und stellen Sie die Höhe auf Ihre Vorlieben ein:

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

Fügen Sie einen zusätzlichen Div um Ihren Iframe (oder den gewünschten Inhalt) hinzu und machen Sie ihn zu einer Tabellenzeile mit einer Höhe von 100% (das Festlegen der Höhe ist wichtig, wenn Sie einen Iframe einbetten möchten, um die Höhe zu füllen).

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

daamsie
quelle
1

Ich denke, Sie haben hier ein konzeptionelles Problem. Zu sagen "Ich habe versucht, die Höhe einzustellen: 100% auf dem Iframe, das Ergebnis ist ziemlich nahe, aber der Iframe hat versucht, die gesamte Seite zu füllen." . Nun, wann war "100%" nicht gleich "ganz"?

Sie haben den Iframe gebeten, die gesamte Höhe seines Containers (der der Körper ist) zu füllen, aber leider hat er ein Block-Level-Geschwister im <div>, über dem Sie 30px groß sein möchten. Die übergeordnete Containersumme wird nun aufgefordert, eine Größe von 100% + 30px> 100% festzulegen! Daher Bildlaufleisten.

Was Sie damit meinen, ist, dass Sie möchten, dass der Iframe das verbraucht, was wie Frames und Tabellenzellen übrig bleibt , dh height = "*". IIRC existiert nicht.

Leider gibt es nach meinem besten Wissen auch keine Möglichkeit, absolute und relative Einheiten effektiv zu mischen / zu berechnen / zu subtrahieren. Ich denke, Sie haben zwei Möglichkeiten:

  1. Positionieren Sie Ihr Div unbedingt so, dass es aus dem Container genommen wird, sodass der Iframe allein die Containerhöhe verbraucht. Dies lässt Sie zwar mit allen möglichen anderen Problemen zurück, aber vielleicht wäre es für das, was Sie tun, Deckkraft oder Ausrichtung in Ordnung.

  2. Alternativ müssen Sie eine% -Höhe für das Div angeben und die Höhe des Iframes um diesen Betrag reduzieren. Wenn die absolute Höhe wirklich so wichtig ist, müssen Sie diese stattdessen auf ein untergeordnetes Element des div anwenden.

Annakata
quelle
1

Nachdem ich eine Weile die CSS-Route ausprobiert hatte, schrieb ich etwas ziemlich Grundlegendes 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

benb
quelle
1

Es wird mit dem unten genannten Code funktionieren

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

Ähnliche Antwort von @MichAdel, aber ich benutze 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

Roy Shmuli
quelle
0

Sie können dies tun, indem Sie die Körpergröße bei Lade- / Größenänderungsereignissen messen und die Höhe auf (volle Höhe - Bannerhöhe) einstellen.

Beachten Sie, dass Sie diese Größe derzeit in IE8 Beta2 nicht ändern können, da dieses Ereignis derzeit in IE8 Beta2 unterbrochen ist.

scunliffe
quelle
0

oder du kannst in die alte Schule gehen und vielleicht ein Frameset verwenden :

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Amir Arad
quelle
2
@vdbuilder: Nein, es ist nur vor HTML5 gültig . Ich wette, es funktioniert immer noch. ;-)
TJ Crowder
0

Obwohl ich der Meinung bin, dass JS eine bessere Option ist, habe ich eine Lösung, die nur mit CSS funktioniert. Der Nachteil dabei ist, dass Sie, wenn Sie Ihrem iframe-HTML-Dokument häufig Inhalte hinzufügen müssen, einen Prozentsatz der Zeit anpassen müssen.

Lösung:

Versuchen Sie , für BEIDE HTML-Dokumente keine Höhe anzugeben.

html, body, section, main-div {}

dann nur noch codieren:

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

Hinweis: Das Div sollte Ihr Hauptteil sein.

Dies sollte relativ funktionieren. Der Iframe berechnet genau 300% der sichtbaren Fensterhöhe. Wenn Sie HTML-Inhalte aus dem 2. Dokument (im Iframe) kleiner als das Dreifache Ihrer Browserhöhe haben, funktioniert dies. Wenn Sie diesem Dokument nicht häufig Inhalte hinzufügen müssen, ist dies eine dauerhafte Lösung, und Sie können einfach Ihren eigenen Prozentsatz finden, der entsprechend Ihrer Inhaltshöhe benötigt wird.

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

pixelfe
quelle
0

Das Attribut " nahtlos " ist ein neuer Standard, mit dem dieses Problem gelöst werden soll:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Wenn Sie dieses Attribut zuweisen, werden Rahmen und Bildlaufleisten entfernt und der Iframe auf seine Inhaltsgröße angepasst. Es wird jedoch nur in Chrome und der neuesten Version von Safari unterstützt

Mehr dazu hier: HTML5 iFrame Seamless Attribute

user2254487
quelle
Das nahtlose Attribut wurde aus der HTML 5-Spezifikation entfernt.
Eric Steinborn
0

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

}
UnLoCo
quelle
0

Sie können die Iframe-Höhe nicht in% festlegen, da die Körpergröße Ihres Elternteils nicht 100% beträgt. Stellen Sie daher die Höhe des Elternteils auf 100% ein und wenden Sie dann die Iframe-Höhe 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>
Pravin Abhale
quelle
0

Wenn Sie Zugriff auf den Inhalt des zu ladenden Iframes haben, können Sie dessen übergeordnetem Element anweisen, die Größe bei jeder Größenänderung zu ändern.

    $(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") zu verbessern, damit Sie den richtigen auswählen.

Stephen
quelle
0

Ich denke, der beste Weg, um dieses Szenario mit CSS-Position zu erreichen. Stellen Sie die Position relativ zu Ihrem übergeordneten Div und die Position ein: absolut zu Ihrem 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>
Erweitern Sie das Snippet

Für andere Padding- und Margin-Probleme ist css3 calc () seit Tagen sehr weit fortgeschritten und größtenteils auch mit allen Browsern kompatibel.

check calc ()

Jay Patel
quelle
0

Warum nicht (mit geringfügigen Anpassungen für Körperpolster / Ränder)?

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
Zugriff gewährt
quelle
Sie ersetzen müssen -0mit +'px'am Ende. Funktioniert es auf dem Handy?
Dmitri Zaitsev