Wie kann ich dafür sorgen, dass ein Iframe die verbleibende Seitenhöhe nur mit CSS dynamisch füllt?

Dynamisches Seitenhöhenmanagement für Iframes mit CSS

Frage:

Erreichen eines Iframes, der Die verbleibende Höhe einer Webseite nahtlos auszufüllen und sich automatisch an die Größenänderung des Browsers anzupassen, hat sich als Herausforderung erwiesen. Trotz der Versuche, height:100% und Rand-/Auffülltechniken zu verwenden, bleibt eine unnötige vertikale Bildlaufleiste bestehen, da der Iframe versucht, die gesamte Seitenhöhe, einschließlich der Kopfzeile, einzunehmen. Wie kann dieses Problem allein mit CSS gelöst werden?

Antwort:

Aktualisiert im Jahr 2019:

Flexbox hat sich hierfür als die zuverlässigste und am weitesten unterstützte Lösung herausgestellt Dilemma.

CSS-Code:

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

HTML-Struktur:

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

Durch die Implementierung von Flexbox wird der iframe wird automatisch erweitert, um den verbleibenden Platz unter der Kopfzeile auszufüllen. Es passt seine Höhe dynamisch an die Größe des Browserfensters an und sorgt so für ein ansprechendes und optisch ansprechendes Layout.

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