我想设计一个带有横幅和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 > 身体< / >


当前回答

另一种选择是使用vh

<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>

其他回答

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>

虽然我同意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文档继承它的高度。它阻止了它,因为我们没有为它们都指定高度。当我们给子对象一个%时,它会寻找它的父对象,如果没有,它会取它的内容高度。前提是其他容器没有给定高度。

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

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

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

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

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

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

它将与下面提到的代码一起工作

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>