我想设计一个带有横幅和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是在一个div中加载的,因此我需要一些其他的窗口。看到我们的项目已经严重依赖jQuery,我发现这是最优雅的解决方案:

$("iframe").height($("#middle").height());

当然,“#middle”是div的id。你需要做的唯一额外的事情是,每当用户调整窗口大小时,召回这个大小变化。

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

其他回答

为什么不这样做(对body padding/margin进行轻微调整)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>

我认为最好的方法来实现这个场景使用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 ()

你可以使用DOCTYPE,但你必须使用table。看看这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>

“无缝”属性是一个新的标准,旨在解决这个问题:

http://www.w3schools.com/tags/att_iframe_seamless.asp

当分配此属性时,它将删除边框和滚动条,并将iframe大小设置为其内容大小。 不过它只支持Chrome和最新的Safari浏览器

更多信息请点击这里: HTML5 iFrame无缝属性

您可以通过在加载/调整大小事件上测量正文大小并将高度设置为(full height - banner height)来实现这一点。

请注意,目前在IE8 Beta2中,您不能执行此onresize操作,因为该事件目前在IE8 Beta2中已中断。