如何仅使用 CSS 使 iframe 填充页面的剩余高度？

无需 JavaScript 即可让 iframe 无缝填充剩余高度

设计带有横幅和 iframe 的网页时，可能会需要 iframe自动调整大小以占据整个剩余页面高度。使用 CSS 实现此目的是可行的。

最初，将 iframe 的高度设置为 100% 似乎很合乎逻辑，但导致 iframe 试图填充整个页面，包括横幅的高度。这导致了不必要的垂直滚动条。此外，在 DIV 上使用 CSS 边距和填充来保留剩余高度适用于 DIV，但不适用于 iframe。

截至 2019 年，最佳解决方案是 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>

以上是如何仅使用 CSS 使 iframe 填充页面的剩余高度？的详细内容。更多信息请关注PHP中文网其他相关文章！