具有自适应高度的 iframe，适合页面的“其余部分”答案

【问题标题】：iframe with adaptive height, fitting the "rest" of the page具有自适应高度的 iframe，适合页面的“其余部分”
【发布时间】：2020-09-25 04:30:46
【问题描述】：

虽然已经发布了很多问题，但我没有找到答案，所以希望有人能提供帮助。

我有一个网站，它由标题和下面的 iframe 组成。 iframe 的高度因页面而异，有时很长，有时很小。 iframe 必须适合整个宽度。

我希望 iframe 的高度适合页面的其余部分（意味着：整个页面减去页眉的高度）。我不在乎 iframe 是否更小，我正在寻找像素精确的解决方案。

这是我目前生成的代码示例：

<!doctype html>
<html lang="de">
<head>
    <style>

header { border: 2px solid blue; }
.iframewrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 2px solid green;
}
.iframewrapper {
  padding-top: 40%;
  position: relative;
  height: 100%;
  width: 100%;
  border: 2px solid red;

}
    </style>
</head>
<body>
<header>
    <h1>This is the header.</h1>
    <p>Some text.</p>
</header>
<div class="iframewrapper">
<iframe src="iframetest-big.html" frameborder="0" scrolling="yes" />
</div>    
</body>
</html>

您可以查看here（或this css-fiddle，但这不是很形象，因为我无法从外部 url 嵌入 iframe 文件）。

现在使用此代码，iframe 要么太小（如果我有一个大窗口或包装类中的小填充顶部）或太大，导致出现第二个滚动条（如果我有一个小窗口或包装类中的大填充顶部）。我试图说明这张图片中的情况：实现此目的的正确方法是什么？

【问题讨论】：

标签： css iframe height

【解决方案1】：

Flexbox 非常适合。只需将 body 设置为 100vh，将方向设置为 column（因此一个元素在另一个元素之下）并让 iframe 填充除标题空间之外的整个 flexbox。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}


iframe {
  width: 100%;
  flex: 1;
  border: 0;
  min-height: 0; /* just due to very small preview stackoverflow fiddle */
}

<!doctype html>
<html lang="de">
<head>
</head>
<body>
  <header>
    <h1>This is the header.</h1>
    <p>Some text.</p>
  </header>
  <iframe src="https://en.wikipedia.org/wiki/Stack_Overflow" />
</body>
</html>

【讨论】：