Wie kann ich dafür sorgen, dass ein Iframe die verbleibende Höhe einer Seite nur mit CSS ausfüllt?

Iframe füllt die verbleibende Höhe nahtlos ohne JavaScript aus

Beim Entwerfen einer Webseite mit einem Banner und einem Iframe wünscht man sich möglicherweise den Iframe um die Größe automatisch so anzupassen, dass sie die gesamte verbleibende Seitenhöhe einnimmt. Dies lässt sich mit CSS erreichen.

Ursprünglich schien es logisch, die Höhe des Iframes auf 100 % zu setzen, führte jedoch dazu, dass ein Iframe versuchte, die gesamte Seite einschließlich der Höhe des Banners auszufüllen. Dies führte zu einer unnötigen vertikalen Bildlaufleiste. Darüber hinaus funktionierte die Verwendung von CSS-Margin und Padding am DIV, um die verbleibende Höhe für DIV zu reservieren, jedoch nicht für Iframes.

Ab 2019 ist Flexbox die optimale Lösung. Es wird in allen Browsern umfassend unterstützt:

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>

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Iframe die verbleibende Höhe einer Seite nur mit CSS ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!