Wie kann man einen Iframe ohne JavaScript dazu bringen, die verbleibende Höhe seines Containers auszufüllen?

Iframe ohne JavaScript an 100 % der verbleibenden Höhe des Containers anpassen

Beim Entwerfen einer Webseite mit einem Banner und einem Iframe wird ein Layout erreicht, bei dem der Iframe automatisch angezeigt wird Passt sich an, um die verbleibende Höhe auszufüllen, kann eine Herausforderung darstellen.

Anfänglich Versuchen Sie es

Das Festlegen der Iframe-Höhe auf „100 %“ scheint eine unkomplizierte Lösung zu sein. Bei diesem Ansatz wird jedoch versucht, die gesamte Seitenhöhe einschließlich des Bannerbereichs auszufüllen. Als Ergebnis wird eine unnötige vertikale Bildlaufleiste angezeigt.

Verwenden von CSS-Rändern und -Auffüllungen

Während CSS-Ränder und -Auffüllungen die verbleibende Höhe für DIV-Elemente effektiv ausfüllen können, ist diese Strategie hilfreich funktioniert bei Iframes nicht wie erwartet.

Lösung

An Wenn Sie dieses Problem beheben möchten, sollten Sie die Verwendung von Flexbox in Betracht ziehen, einem CSS-Layoutmodul, das eine zuverlässige Lösung für dieses Szenario bietet. Hier ist ein Codebeispiel mit Flexbox:

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>

Dieses Flexbox-Layout stellt sicher, dass das Banner (.first-row) eine feste Höhe hat, während der Iframe (.second-row) erweitert wird, um den zu füllen verbleibende Höhe. Die Eigenschaft „flex-grow“ weist den Iframe an, zu wachsen, um jeden verfügbaren Platz einzunehmen.

Mit dieser Technik nimmt der Iframe effektiv 100 % der verbleibenden Höhe des Containers ein und passt sich nahtlos an die Größenänderung des Browsers an.

Das obige ist der detaillierte Inhalt vonWie kann man einen Iframe ohne JavaScript dazu bringen, die verbleibende Höhe seines Containers auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!