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:
- Verwenden Sie JavaScript
- 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>
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>
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>
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.