我有一个HTML页面，在aiframe中有一个div。iframe高度应为可用窗口高度的100%。这在IE11和Firefox中如预期的那样显示，但在IE8中，无论窗口大小或内容如何，iframe都保持固定大小。当浏览器为全屏时，这大约是屏幕空间的1/3。
这是IE8的怪癖吗？我怎样才能让iframe消耗100%的高度？
浏览器未处于兼容模式。
精简示例：
html{
height:100%;
}
body {
display:table;
width:100%;
height:100%;
}
.row{
display:table-row;
height:100%;
}
.iframeContainer{
height:100%;
width:100%;
}
.iframeContainer iframe{
width:100%;
height:100%;
border-style:solid !important;
border:2px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="row">
<div class="iframeContainer">
<iframe></iframe>
</div>
</div>
</body>
</html>最佳答案
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
html,body{ padding:0;margin:0 }
html{
height:100%;
}
body {
display:table;
width:100%;
height:100%;
position:relative;
background-color:lightcoral;
}
.row{
display:table-row;
height:100%;
/*width:100%*/
}
.iframeContainer{
/*height:100%;*/ /* use h+w instead of positioning below if outer (coral) frame is undesired */
/*width:100%;*/
/*display:table-cell;*/
position:absolute;top:0;right:0;bottom:0;left:0;margin:1em;
}
iframe{
width:100%;
height:100%;
border-style:solid !important;
border:2px;
}
</style>
</head>
<body>
<div class="row">
<div class="iframeContainer">
<iframe src="about:blank" onload="this.contentDocument.body.style.backgroundColor='lavender'" frameborder=0></iframe>
</div>
</div>
</body>
</html>
如果我理解您设置body to display:table的目的，那是为了居中。我更喜欢使用position:technology，top，right，bottom，left=0作为CSS 2.1认可的hack。我想，不管完成了什么工作，使用IE8的table技巧，都需要显示iframeContainer包装器：table cell。否则，正如您所解释的，它无法计算宽度+高度，因此基于它的iframe w+h不起作用。但是即使使用表单元格包装器，它仍然会使宽度+高度难以管理，并且不会稍微溢出视区。下面是一个实验：table-cell demo不完全更改表策略，我们仍然可以在样式中插入定位并让IE8工作。这样做时，它会在视窗内自动调整框的大小，而不会溢出它。在上面的标记中，我更进一步，用1厘米的珊瑚边界框起了桌子。（因为在那一点上很简单）这里是在线的：table-cell positioned