关于iframe和它的高度有很多问题.有些相似,但没有给我正确的答案.那么让我解释一下我的情况：
JSFiddle：http://jsfiddle.net/AmVhK/3/show/
编辑：http://jsfiddle.net/AmVhK/3/
有一个2行的表.第一个包含一个固定高度的div #toolbar.第二行包含一个包含iframe的div.我需要iframe来获取工具栏div下方的可用空间.
我面临的问题是IE标准模式(支持IE8).比方说,窗口的高度是1000px,工具栏的高度是200px,那么iframe的高度也是1000px,滚动条也是如此.我需要iframe的高度为(页面高度 – 工具栏高度).
如果有一个CSS解决方案会很好.使用JavaScript获取高度可用并将其设置为iframe或者它包含div是我的最后手段解决方案:)
将工具栏或iframe设置为绝对位置也不适用于我的用例.如果需要,标记更改是可以的(如果要删除表)
我已经设置了以下CSS：
html,body {height: 100%}
任何好的解决方案来实现它.
解决方法
好的,这是我的尝试,有一个问题,iframe想在IE7中有一个水平滚动,但布局很好,我不得不放弃,因为与IE7的战斗让我想要咀嚼我自己的眼睛,希望有人可以扩展从这里.
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<title>iframelayout</title>
<style>
html,body {
margin: 0;
padding: 0;
height: 100%;
}
div,iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
