I want display a header with arbitrary content above an iframe that takes up the rest of the screen. I have managed to get this working with tables using the following:
<!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>
That works in Firefox and Chrome, but not IE7 (I don't know why). Without using tables, this is the closest I could get:
<!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>
This looks the same in all browsers, but the iframe is too short. If I set its height to 100% though, it grows as big as the screen and 2 scrollbars appear (the same as IE7 in the table version). I want the iframe to take up whatever space is left in the browser window, but not more. I would rather not have to resort to Javascript.