我有以下代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
如何设置 iframe 以使其占用页眉和页脚之间的所有剩余宽度和高度？
最佳答案
解决了，需要一些 javascript :)
实例:
http://simplestudio.rs/yard/framed/framed.html (离线)
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
#framed {
position: relative;
width: 100%;
height: 100%;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
<script>
var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);
function chng_iframe_height(ifrid,hid,fid) {
var eheight = window.innerHeight;
var ifrobj = document.getElementById(ifrid);
var header = document.getElementById(hid);
var footer = document.getElementById(fid);
var header_height = getComputedStyle(header).height;
var footer_height = getComputedStyle(footer).height;
var reserved_height = parseInt(header_height) + parseInt(footer_height);
ifrobj.style.height = eheight - reserved_height +"px";
}
</script>
</head>
<body onload="chng_iframe_height('framed','header','footer');">
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com" id="framed"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
基本上，我计算页眉和页脚呈现的高度，获取 window.innerHeight 并从该数字中我知道页眉和页脚之间剩下多少 px，所以我将该值分配给 iframe 并且 whoila 它起作用了......
我还设置了 setinterval 每半秒调用一次该函数，因此如果您调整窗口大小，它几乎会立即更新 iframe 高度...
关于html - 如何让 iframe 占用所有剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12753053/