我想在占据屏幕其余部分的 iframe 上方显示一个带有任意内容的标题。我已经设法使用以下方法来处理表格:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body, iframe, table, tr, td {
margin: 0; padding: 0;
}
html, body, iframe, table, #content {
height: 100%; width: 100%;
}
table {
border-collapse: collapse;
}
iframe {
border: 0;
}
</style>
</head>
<body>
<table>
<tr><td>
<div id="header">
<p>some arbitrary stuff in a header</p>
<p>this is sized dynamically</p>
<p>it's not a fixed size</p>
</div>
</td></tr>
<tr><td id="content">
<iframe src="http://www.bing.com/search?q=stackoverflow" />
</td></tr>
</table>
</body>
</html>
这适用于 Firefox 和 Chrome,但不适用于 IE7(我不知道为什么)。不使用表格,这是我能得到的最接近的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {
margin: 0; padding: 0;
height: 100%;
}
iframe {
margin: 0; padding: 0;
width: 100%;
border: 0;
}
</style>
</head>
<body>
<div id="header">
<p>some arbitrary stuff in a header</p>
<p>this is sized dynamically</p>
<p>it's not a fixed size</p>
</div>
<iframe src="http://www.bing.com/search?q=stackoverflow" />
</body>
</html>
这在所有浏览器中看起来都一样,但是 iframe 太短了。如果我将它的高度设置为 100%,它会像屏幕一样大,并出现 2 个滚动条(与表格版本中的 IE7 相同)。我希望 iframe 占用浏览器窗口中剩余的任何空间,但不会更多。我宁愿不必求助于Javascript。