Kann ich dafür sorgen, dass ein Iframe die verbleibende Höhe eines Containers nur mit CSS ausfüllt?

Iframe so anpassen, dass er zu 100 % der verbleibenden Höhe des Containers passt

Problem:

Beim Erstellen einer Webseite mit a Wenn Sie ein Banner und einen Iframe verwenden, ist es wünschenswert, dass der Iframe die verbleibende Seitenhöhe automatisch ausfüllt, wenn sich die Größe des Browsers ändert. Ist dies rein mit CSS und ohne JavaScript möglich?

Lösung:

Im Jahr 2019 erwies sich Flexbox als optimale Lösung für dieses Szenario. Flexbox bietet hervorragende browserübergreifende Unterstützung und stellt eine effektive Möglichkeit zur Steuerung des Layouts der Seitenelemente dar.

Mit Flexbox können Sie einen übergeordneten Container so definieren, dass er sowohl in der Höhe als auch in der Breite eine Größe von 100 % hat, mit einem flexiblen Richtung auf Spalte eingestellt. Dadurch werden die Elemente vertikal angeordnet.

Erstellen Sie im übergeordneten Container zwei Zeilen:

1. Erste Zeile:Geben Sie ihm eine feste Höhe oder einen Inhalt, der seine Höhe bestimmt .
2. Zweite Zeile: Setzen Sie die Flex-Grow-Eigenschaft auf 1, damit sie sich ausdehnt, um die Fläche auszufüllen verbleibender Platz.

Code-Snippet:

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>

Mit diesem Setup passt der Iframe in der zweiten Reihe automatisch seine Höhe an, um ihn zu belegen der verbleibende Platz auf der Seite, auch wenn die Größe des Browsers geändert wird.

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