如何僅使用 CSS 使 Iframe 動態填入剩餘頁面高度？

使用CSS 對iframe 進行動態頁面高度管理

問題：

問題：

答案：

2019 年更新：

Flexbox 已成為最可靠且得到廣泛支援的解決方案

CSS程式碼：

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 結構：

<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，iframe將自動填入標題下方的剩餘擴充空間。當瀏覽器視窗大小調整時，它將動態調整其高度，確保響應靈敏且視覺上令人愉悅的佈局。

以上是如何僅使用 CSS 使 Iframe 動態填入剩餘頁面高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！