我想设计一个带有横幅和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 > 身体< / >
当前回答
MichAdel代码为我工作，但我做了一些小的修改，以使其正常工作。
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
其他回答
虽然我同意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文档继承它的高度。它阻止了它，因为我们没有为它们都指定高度。当我们给子对象一个%时，它会寻找它的父对象，如果没有，它会取它的内容高度。前提是其他容器没有给定高度。
HTML5新功能:使用calc(对高度)
<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
类似的答案@MichAdel，但我使用JQuery和更优雅。
<script type="text/javascript">
$(document).ready(function() {
var $iframe = $('#iframe_id')[0];
// Calculate the total offset top of given jquery element
function totalOffsetTop($elem) {
return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
}
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= totalOffsetTop($iframe);
$iframe.height = Math.max(0, height) + 'px';
}
$iframe.onload = resizeIframe();
window.onresize = resizeIframe;
});
</script>
iframe_id为iframe标签的ID
没错，你所展示的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的内容，你可以告诉它的父元素在它调整大小的时候调整大小。
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
如果页面上有多个iframe，您可能需要使用id或其他聪明的方法来增强.find(“iframe”)，以便选择正确的iframe。
