如何在沒有 JavaScript 的情況下使 Iframe 填充其容器的剩餘高度？

無需JavaScript，讓iframe 適合容器剩餘高度的100%

設計同時包含橫幅和iframe 的網頁時，實現iframe 自動的佈局調整以填充剩餘高度可能會帶來挑戰。

初始嘗試

將 iframe 的高度設定為「100%」似乎是一個簡單的解決方案。然而，這種方法試圖填滿整個頁面高度，包括橫幅區域。結果，出現了不必要的垂直滾動條。

使用 CSS Margin 和 Padding

雖然 CSS margin 和 padding 可以有效填充 DIV 元素的剩餘高度，但此策略並未如預期運作iframes。

解決方案

要解決此問題，請考慮使用 flexbox，這是一個 CSS 佈局模組，它為這種情況提供了可靠的解決方案。以下是使用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>

此Flexbox 佈局可確保橫幅(.first-row) 具有固定高度，而iframe (.second-row) 會擴充以填滿剩餘高度。 「flex-grow」屬性指示 iframe 成長以佔據任何可用空間。

此技術有效地使 iframe 達到容器剩餘高度的 100%，無縫適應瀏覽器大小調整。

以上是如何在沒有 JavaScript 的情況下使 Iframe 填充其容器的剩餘高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！