我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否有可能不编写JavaScript代码，只使用CSS来完成?
我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面高度，包括横幅div元素的30px高度，所以我得到了不必要的垂直滚动条。它并不完美。
我尝试了CSS的margin, padding属性在DIV上成功地占据了网页的整个剩余高度，但这个技巧在iframe上不起作用。
<身体> < div风格= "宽度:100%;高度:30 px;background - color: # cccccc;" > < / div >旗帜 <iframe src="http: //www.google.com.tw" style="width:100%;高度:100%;" > < / iframe > 身体< / >
当前回答
您可以通过在加载/调整大小事件上测量正文大小并将高度设置为(full height - banner height)来实现这一点。
请注意，目前在IE8 Beta2中，您不能执行此onresize操作，因为该事件目前在IE8 Beta2中已中断。
其他回答
您可以通过在加载/调整大小事件上测量正文大小并将高度设置为(full height - banner height)来实现这一点。
请注意，目前在IE8 Beta2中，您不能执行此onresize操作，因为该事件目前在IE8 Beta2中已中断。
它将与下面提到的代码一起工作
<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
我是这么做的。我也遇到了同样的问题，最后花了几个小时在网上搜索资源。
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { position:fixed; display:block; width:100%; border:none; }
</style>
我把这个添加到头部部分。
请注意，我的iframe位于一个有3行1列的表的中间单元格内。
“无缝”属性是一个新的标准，旨在解决这个问题:
http://www.w3schools.com/tags/att_iframe_seamless.asp
当分配此属性时，它将删除边框和滚动条，并将iframe大小设置为其内容大小。 不过它只支持Chrome和最新的Safari浏览器
更多信息请点击这里: HTML5 iFrame无缝属性
我认为最好的方法来实现这个场景使用css位置。设置位置相对于你的父div和position:绝对于你的iframe。
.container { 宽度:100%; 位置:相对; 身高:500 px; ｝ iframe { 位置:绝对的; 宽度:100%; 高度:100%; ｝ < div class = "容器" > < iframe的src = " http://www.w3schools.com " > <p>你的浏览器不支持iframes < / iframe > < / div >
for other padding and margin issue now a days css3 calc() is very advanced and mostly compatible to all browser as well.
检查calc ()
