我可以只使用 CSS 讓 iframe 填滿容器的剩餘高度嗎？

使iframe 適合容器剩餘高度的100%

問題：

在創建一個同時包含橫幅和iframe，希望iframe 在瀏覽器調整大小時自動填入剩餘的頁面高度。是否可以純粹使用 CSS 而不使用 JavaScript 來實現？

解決方案：

2019 年，flexbox 成為此場景的最佳解決方案。 Flexbox 提供了跨瀏覽器的出色支持，並提供了控制頁面元素佈局的有效方法。

使用 Flexbox，您可以定義父容器的高度和寬度均為 100%，並使用 Flex-方向設定為列。這會垂直排列元素。

在父容器中，建立兩行：

1. 第一行：為其指定固定高度或決定其高度的內容.
2. 第二行： 將其flex-grow 屬性設為1 使其展開填充剩餘空間。

程式碼片段：

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>

透過此設置，第二行中的iframe 將自動調整其即使瀏覽器調整大小，高度也能佔據頁面中的剩餘空間。

以上是我可以只使用 CSS 讓 iframe 填滿容器的剩餘高度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！