我想设计一个带有横幅和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的高度是它的容器(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的高度更改为您想要的高度。

其他回答

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

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

我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%,结果非常接近,但iframe试图填充整个页面”,好吧,什么时候“100%”不等于“整个”?

你已经要求iframe填充它的容器(也就是body)的整个高度,但不幸的是,它在<div>上面有一个块级别的兄弟,你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。

我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西,即height="*"。IIRC,这个不存在。

不幸的是,据我所知,也没有办法有效地混合/计算/减去绝对和相对单位,所以我认为你只有两个选择:

绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然,但也许是为了你 做不透明或对齐将 好的。 或者,您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要,你需要申请 这是div的子元素 代替。

或者你也可以使用老派的框架集:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>

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>

也许这个问题已经有了答案(上面的一些答案是“正确的”方法),但我想我只是补充我的解决方案。

我们的iFrame是在一个div中加载的,因此我需要一些其他的窗口。看到我们的项目已经严重依赖jQuery,我发现这是最优雅的解决方案:

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

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

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