自适应高度的iframe，适配页面"rest"

Question

尽管发了很多问题我没有找到答案，所以希望有人能提供帮助。

我有一个由 header 和下面的 iframe 组成的网站。 iframe 的高度随着页面的变化而变化，有时很长，有时很小。 iframe 必须适合整个宽度。

我希望 iframe 的高度适合页面的其余部分（意思是：整个页面减去 header 的高度）。我不在乎 iframe 是否更小，我正在寻找 pixel-exact 解决方案。

这是我目前生成的code-example：

<!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 (or in this css-fiddle，但这不是很形象，因为我无法从外部url).

嵌入一个iframe-file

现在使用此代码，iframe 要么太小（如果我在 wrapper-class 中有一个大 window 或一个小 padding-top），要么太大，导致出现第二个滚动条（如果我在 wrapper-class 中有一个小的 window 或一个大的 padding-top）。我试图用这张图片来说明情况：实现此目标的正确方法是什么？

Answer 1

Flexbox 非常适合。只需将 body 设置为 100vh，将 direction 设置为 column（因此一个元素在另一个元素之下）并让 iframe 填充整个 flexbox，除了 header space.

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 Whosebug 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>

自适应高度的iframe，适配页面"rest"

iframe with adaptive height, fitting the "rest" of the page

css

iframe

height