我想设计一个带有横幅和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 > 身体< / >
当前回答
你不能设置iframe高度为%，因为你的父体高度不是100%，所以让父体高度为100%，然后应用iframe高度为100%
For eg.
<html>
<head>
<style>
html,body{height:100%}
</style>
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
其他回答
我们使用JavaScript来解决这个问题;这是来源。
var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
iframe.attachEvent("onload", resizeIframe);
} else {
iframe.onload=resizeIframe;
}
window.onresize = resizeIframe;
备注:ifm为iframe ID
pageY()由John Resig (jQuery的作者)创建
我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面”，好吧，什么时候“100%”不等于“整个”?
你已经要求iframe填充它的容器(也就是body)的整个高度，但不幸的是，它在<div>上面有一个块级别的兄弟，你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。
我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西，即height="*"。IIRC，这个不存在。
不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你只有两个选择:
绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然，但也许是为了你 做不透明或对齐将 好的。 或者，您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要，你需要申请 这是div的子元素 代替。
我是这么做的。我也遇到了同样的问题，最后花了几个小时在网上搜索资源。
<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无缝属性
虽然我同意JS似乎是一个更好的选择，我有一个有点CSS只工作的解决方案。它的缺点是，如果您必须频繁地向iframe html文档添加内容，您将不得不调整一个百分比的时间。
解决方案:
试着不要为你的html文档指定任何高度，
html, body, section, main-div {}
然后只编写如下代码:
#main-div {height:100%;}
#iframe {height:300%;}
注意:div应该是你的主要部分。
这应该是相对有效的。iframe精确地计算可见窗口高度的300%。如果第二个文档的html内容(在iframe中)的高度小于浏览器高度的3倍，它就可以工作。如果你不需要频繁地向文档添加内容，这是一个永久的解决方案，你可以根据你的内容高度找到你自己需要的百分比。
这是因为它可以防止第二个html文档(一个嵌入)从父html文档继承它的高度。它阻止了它，因为我们没有为它们都指定高度。当我们给子对象一个%时，它会寻找它的父对象，如果没有，它会取它的内容高度。前提是其他容器没有给定高度。
