如何在没有 JavaScript 的情况下使 Iframe 填充其容器的剩余高度？

无需 JavaScript，让 iframe 适合容器剩余高度的 100%

设计同时包含横幅和 iframe 的网页时，实现 iframe 自动的布局调整以填充剩余高度可能会带来挑战。

初始尝试

将 iframe 的高度设置为“100%”似乎是一个简单的解决方案。然而，这种方法试图填充整个页面高度，包括横幅区域。结果，出现了不必要的垂直滚动条。

使用 CSS Margin 和 Padding

虽然 CSS margin 和 padding 可以有效填充 DIV 元素的剩余高度，但此策略没有按预期工作iframes。

解决方案

要解决此问题，请考虑使用 flexbox，这是一个 CSS 布局模块，它为这种情况提供了可靠的解决方案。下面是使用 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>

此 Flexbox 布局可确保横幅 (.first-row) 具有固定高度，而 iframe (.second-row) 会扩展以填充剩余高度。 “flex-grow”属性指示 iframe 增长以占据任何可用空间。

此技术有效地使 iframe 达到容器剩余高度的 100%，无缝适应浏览器大小调整。

以上是如何在没有 JavaScript 的情况下使 Iframe 填充其容器的剩余高度？的详细内容。更多信息请关注PHP中文网其他相关文章！