HTML5 iFrame的高度仅为150px [英] HTML5 iFrame is only 150px in height
问题描述
基本上，我想做的是在页面顶部放置一个瘦小的工具栏，并用一排排各种DIV容器作为按钮.我希望这些按钮可以更新工具栏下方iframe的内容.问题是我在工具栏下面的iframe的高度仅为150px.具体来说，当我指定<！DOCTYPE html> 时，会发生这种情况，但是当我不指定此HTML5 doctype时，它会很好地工作.
Basically what I'm trying to do is have a single, thin toolbar across the top of my page with a row of various DIV containers working as buttons. I want these buttons to update the content of an iframe below the toolbar. The problem is that my iframe below the toolbar is only 150px in height. Specifically this occurs when I specifiy <!DOCTYPE html>, but when I do not specify this HTML5 doctype it works fine.
我对此进行了一些阅读，这似乎是因为原因是HTML5不再涵盖百分比可以设置iFrame的宽度和高度.但是，现在我陷入了困境，因为我无法使iFrame增长到工具栏下窗口剩余高度的100％.我什至创建了一个iframe_container DIV并将其放入其中，而iframe_container的高度为％100，但我仍然无法使其正常工作.
I read up on this a bit and it looks like the reason is that HTML5 no longer covers percentages to be able to set the width and height of an iFrame. However now I'm stuck because I can't get the iFrame to grow to 100% of the remaining height of the window under the toolbar. I've even created an iframe_container DIV and put the iframe in that, with the iframe_container being at height=%100 but I'm still not able to get it working correctly.
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的Seamless属性，但这似乎也无济于事.到目前为止，我发现最好的选择是添加 {position:absolute;顶部:30px；bottom:0px;} 到我的iframe_container类，它确实解决了iframe大小问题，但是它引入了一些非常奇怪的滚动行为，包括右侧的双滚动条.关于如何确保iframe填充窗口底部并仍然保持HTML5兼容的任何想法?谢谢
I've tried the seamless attribute for iframes and it does not seem to be helping here either. The best option I've found so far is to add {position: absolute; top: 30px; bottom: 0px;} to my iframe_container class, which does fix the iframe size issue, however it introduces some very odd scrolling behavior including dual scrollbars on the right. Any ideas on how I can make sure my iframe fills up the bottom of the window and still stay HTML5 compliant? Thanks
推荐答案
也许是这样的事情?
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; }
这篇关于HTML5 iFrame的高度仅为150px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
