Kar*_*arl 5 html css iframe height
基本上我想要做的是在我的页面顶部有一个单一的、细长的工具栏，其中有一排用作按钮的各种 DIV 容器。我希望这些按钮更新工具栏下方 iframe 的内容。问题是我的工具栏下方的 iframe 高度只有 150 像素。具体来说，当我指定时会发生这种情况<!DOCTYPE html>，但是当我不指定此 HTML5 文档类型时，它可以正常工作。
我读了一点，看起来原因是 HTML5 不再涵盖能够设置 iFrame 宽度和高度的百分比。 但是现在我被卡住了，因为我无法让 iFrame 增长到工具栏下窗口剩余高度的 100%。我什至创建了一个 iframe_container DIV 并将 iframe 放入其中， iframe_container 位于 height=%100 但我仍然无法使其正常工作。
HTML：
<!DOCTYPE html>
<html>
<body>
<div class="header_bar">
<div class="tab_active" onclick="location.href='...'">Tab1</div>
<div class="tab_inactive" onclick="location.href='...'">Tab2</div>
<div class="tab_inactive" onclick="location.href='...'">Tab3</div>
</div>
<div class="iframe_container">
<iframe id="main_iframe" class="main_iframe" frameborder="0" src="...">
</iframe>
</div>
</body>
</html>
CSS：
.iframe_container {
width: 100%;
height: 100%;
}
.main_iframe {
width: 100%;
height: 100%;
}
.header_bar {
float: none;
width: 100%;
height: 30px;
}
.tab_inactive {
float: left;
}
.tab_active {
float: left;
}
我已经尝试了 iframe 的无缝属性，但它似乎也没有帮助。到目前为止，我发现的最佳选择是添加{position: absolute; top: 30px; bottom: 0px;}到我的 iframe_container 类中，它确实解决了 iframe 大小问题，但是它引入了一些非常奇怪的滚动行为，包括右侧的双滚动条。关于如何确保 iframe 填满窗口底部并仍然保持 HTML5 兼容的任何想法？谢谢
也许是这样的？
html { height:100% }
body { height:100%; width:100%; margin:0; display:table;}
.header_bar { display:table-row; }
.iframe_container { height:100%; display:table-cell; }
iframe { height:100%; width:100%; display:block; }
| 归档时间： |
|
| 查看次数： |
7528 次 |
| 最近记录： |