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

其他回答

另一种方法是使用position: fixed;在父节点上。 如果我没记错的话,位置是固定的;将元素绑定到视口,因此,一旦你给这个节点宽度:100%;及高度:100%;属性,它将横跨整个屏幕。从这一点开始,你可以把<iframe>标签放在它里面,并跨越剩余的空间(包括宽度和高度),简单的宽度:100%;高度:100%;CSS指令。

示例代码


body { margin: 0px; padding: 0px; } /* iframe's parent node */ div#root { position: fixed; width: 100%; height: 100%; } /* iframe itself */ div#root > iframe { display: block; width: 100%; height: 100%; border: none; } <html> <head> <title>iframe Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="root"> <iframe src="http://stackoverflow.com/"> Your browser does not support inline frames. </iframe> </div> </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无缝属性

没错,你所展示的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。