Question

我想将iframe的高度设置为扩展到其余的可用空间（即windowsHeight - menuHeight - footerHeight），就像在contentFrame中使用的那样，这对我来说不起作用。当高度设置为特定像素时，它可以工作。宽度：100％有效。由于该应用是遗留应用，因此应与IE 10/11，Chrome和Firefox兼容。

index.htm

<body>
<iframe name="menuFrame" src="menu.htm" frameborder="1" style="height:40px; width: 100%;">
</iframe>
<iframe name="contentFrame" src="content.htm" frameborder="1" style="height:100%; width: 100%;">
</iframe>
<iframe name="footerFrame" src="footer.htm" frameborder="1" style="height:15px; width: 100%;">
</iframe>
</body>

menu.htm

<body>
menu
</body>

content.htm

<body style="border: solid 1 black;height: 100%;">
content
</body>

footer.htm

<body>
footer
</body>

更新感谢你的帮助。我只测试了LGSon，这对我来说更容易理解。

Answer 1

这是要走的路：

您必须确保在iframe中添加width。此外，最好将其设置为iframe的display:block;值。

100％高度和100％宽度iframe内联的示例：

<iframe src="PLACE_YOUR_URL_THERE.html" height="100%" width="100%" style="display: block;" />

当然，如果可能的话，最好的方法是通过CSS设置它。但两者都有效。

N.B：在你的CSS中，添加这个属性：

html, body{
   height: 100%;
}

因此，您将确保您的body和html标记占用当前视口高度的100％

Answer 2

使用CSS calc()来完成这项工作。

＆＃13;

VS120COMNTOOLS

＆＃13;

html, body {
  margin: 0;
  height: 100%;             /* need for iframe height 100% to work */
}
iframe {
  box-sizing: border-box;   /* make the border size be included in the height */
  display: block;           /* make them block to fix white space margin */
  width: 100%;
}
iframe:nth-child(1) {
  height: 40px;
}
iframe:nth-child(3) {
  height: 15px;
}
iframe:nth-child(2) {
  height: calc(100% - 55px);  /* 55px = sum of menu/footer iframe height */
}

＆＃13;

Answer 3

如果您可以免费使用calc（http://caniuse.com/#feat=calc）和视口单元（http://caniuse.com/#feat=viewport-units），则可以通过执行以下操作来获取中间iframe以填充剩余空间：

*,
*:before,
*:after {
	box-sizing: border-box;
}

html,
body,
div,
iframe {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100vh;
}

iframe {
	display: block;
	width: 100vw;
}

<iframe name="menuFrame" frameborder="1" src="" style="height:40px;">
</iframe>
<iframe name="contentFrame" frameborder="1" src="" style="height:calc(100vh - 55px);">
</iframe>
<iframe name="footerFrame" frameborder="1" src="" style="height:15px;">
</iframe>

HTML iframe最大高度，高度：100％不起作用

3 个答案: