自适应高度的iframe，适合页面的 "其余部分"。

Question

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

我有一个网站，由一个页眉和下面的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>

你可以看一下此处 (或在这个css-fiddle但这不是很形象，因为我无法从外部url嵌入iframe文件）。)

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

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

自适应高度的iframe，适合页面的 "其余部分"。

问题描述投票：0回答：1

1个回答

最新问题

自适应高度的iframe，适合页面的 "其余部分"。

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1