我想设计一个带有横幅和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 > 身体< / >
当前回答
“无缝”属性是一个新的标准，旨在解决这个问题:
http://www.w3schools.com/tags/att_iframe_seamless.asp
当分配此属性时，它将删除边框和滚动条，并将iframe大小设置为其内容大小。 不过它只支持Chrome和最新的Safari浏览器
更多信息请点击这里: HTML5 iFrame无缝属性
其他回答
没错，你所展示的iframe的高度是它的容器(body)的100%。
试试这个:
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<div style="width:100%; height:90%; background-color:transparent;">
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
</iframe>
</div>
</body>
当然，将第二个div的高度更改为您想要的高度。
它将与下面提到的代码一起工作
<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
试试下面的方法:
<iframe name="" src="" width="100%" style="height: 100em"/>
这对我很有效
我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面”，好吧，什么时候“100%”不等于“整个”?
你已经要求iframe填充它的容器(也就是body)的整个高度，但不幸的是，它在<div>上面有一个块级别的兄弟，你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。
我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西，即height="*"。IIRC，这个不存在。
不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你只有两个选择:
绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然，但也许是为了你 做不透明或对齐将 好的。 或者，您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要，你需要申请 这是div的子元素 代替。
您可以通过在加载/调整大小事件上测量正文大小并将高度设置为(full height - banner height)来实现这一点。
请注意，目前在IE8 Beta2中，您不能执行此onresize操作，因为该事件目前在IE8 Beta2中已中断。
