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


当前回答

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

其他回答

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

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

我们使用JavaScript来解决这个问题;这是来源。


var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

备注:ifm为iframe ID

pageY()由John Resig (jQuery的作者)创建

如果你可以访问将要加载的iframe的内容,你可以告诉它的父元素在它调整大小的时候调整大小。

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

如果页面上有多个iframe,您可能需要使用id或其他聪明的方法来增强.find(“iframe”),以便选择正确的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>

我是这么做的。我也遇到了同样的问题,最后花了几个小时在网上搜索资源。

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

我把这个添加到头部部分。

请注意,我的iframe位于一个有3行1列的表的中间单元格内。