我可以仅使用 CSS 让 iframe 填充容器的剩余高度吗？-css教程-PHP中文网

我可以仅使用 CSS 让 iframe 填充容器的剩余高度吗？

Susan Sarandon

发布： 2024-12-08 19:34:16

原创

500 人浏览过

Can I Make an Iframe Fill the Remaining Height of a Container Using Only CSS?

使 iframe 适合容器剩余高度的 100%

问题：

在创建一个同时包含横幅和 iframe，希望 iframe 在浏览器调整大小时自动填充剩余的页面高度。是否可以纯粹使用 CSS 而不使用 JavaScript 来实现？

解决方案：

2019 年，flexbox 成为此场景的最佳解决方案。 Flexbox 提供了跨浏览器的出色支持，并提供了控制页面元素布局的有效方法。

使用 Flexbox，您可以定义父容器的高度和宽度均为 100%，并使用 Flex-方向设置为列。这会垂直排列元素。

在父容器中，创建两行：

第一行：为其指定固定高度或确定其高度的内容.
第二行： 将其 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中文网其他相关文章！