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


当前回答

你可以用html/css这样做:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>

其他回答

另一种方法是使用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>

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

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

你可以用html/css这样做:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>

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

<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列的表的中间单元格内。

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

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