如何仅使用 CSS 使 Iframe 动态填充剩余页面高度？

使用 CSS 对 iframe 进行动态页面高度管理

问题：

实现一个 iframe无缝填充网页的剩余高度并自动调整浏览器大小已被证明具有挑战性。尽管尝试使用 height:100% 和边距/填充技术，但由于 iframe 试图占据整个页面高度（包括标题），不必要的垂直滚动条仍然存在。如何仅通过 CSS 解决这个问题？

答案：

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中文网其他相关文章！