問題：
在創建一個同時包含橫幅和iframe，希望iframe 在瀏覽器調整大小時自動填入剩餘的頁面高度。是否可以純粹使用 CSS 而不使用 JavaScript 來實現？
解決方案：
2019 年，flexbox 成為此場景的最佳解決方案。 Flexbox 提供了跨瀏覽器的出色支持，並提供了控制頁面元素佈局的有效方法。
使用 Flexbox，您可以定義父容器的高度和寬度均為 100%，並使用 Flex-方向設定為列。這會垂直排列元素。
在父容器中，建立兩行：
程式碼片段：
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中文網其他相關文章！
