html网页iframe填满网页,html – 设置iframe以占用页面中的剩余空间

关于iframe和它的高度有很多问题.有些相似,但没有给我正确的答案.那么让我解释一下我的情况：

有一个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的战斗让我想要咀嚼我自己的眼睛,希望有人可以扩展从这里.

iframelayout

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%;

}

Your browser is kaput!