我想设计一个带有横幅和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 src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
其他回答
为什么不这样做(对body padding/margin进行轻微调整)
<script>
var oF = document.getElementById("iframe1");
oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
类似的答案@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
你可以用html/css这样做:
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
我使用display:table来修复类似的问题。它几乎适用于此，留下一个小的垂直滚动条。如果您试图用iframe以外的东西填充这个灵活的列，它可以工作(不是
使用下面的HTML
<body>
<div class="outer">
<div class="banner">Banner</div>
<div class="iframe-container">
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
</div>
</div>
</body>
更改外部div以使用display:table，并确保它具有宽度和高度设置。
.outer {
display: table;
height: 100%;
width: 100%;
}
将横幅设置为一个表格行，并设置它的高度为您的偏好:
.banner {
display: table-row;
height: 30px;
background: #eee;
}
在你的iframe(或任何你需要的内容)周围添加一个额外的div，并使它成为一个高度设置为100%的表行(设置它的高度是至关重要的，如果你想嵌入一个iframe来填充高度)
.iframe-container {
display: table-row;
height: 100%;
}
下面是一个jsfiddle显示它在工作(没有iframe，因为这似乎不工作在小提琴)
https://jsfiddle.net/yufceynk/1/
如果你可以访问将要加载的iframe的内容，你可以告诉它的父元素在它调整大小的时候调整大小。
$(window).resize(function() {
$(parent.document)
.find("iframe")
.css("height", $("body").css("height"));
}).trigger("resize");
如果页面上有多个iframe，您可能需要使用id或其他聪明的方法来增强.find(“iframe”)，以便选择正确的iframe。
