Hi,

I've got a problem with an IFrame on my page. The IFrame is set to 100% width and height, but because the IFrame starts 182 pixels from the top of the page (there will be headers and/or menus above it) the frame extends (presumably 182px) below the bottom of the browser window.

I've set up a basic example page here and the code is as follows:

PAGE1.HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WTF?</title>

<style>
html { height:100%; overflow:hidden; }
body { background:#CCC; height:100%; margin:0; overflow:hidden; }

DIV#top_section {
	background-color:#000;
	text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:170px; color:#AAA;
	position: absolute;
	width: 100%; height: 182px;
	left: 0px; top: 0px
}
DIV#main_section {
	position:absolute;
	width:100%; height:100%;
	left:0px; top:182px
}
IFRAME#ifrm
{
	width:100%; height:100%
}
</style>

</head>

<body>
<div id='top_section' name='top_section'>INFO/MENU</div>

<div id='main_section' name='main_section'>
	<iframe frameborder="0" name="ifrm" id="ifrm" src="page2.html"></iframe>
</div>

</body>
</html>
PAGE2.HTML (IFRAME CONTENT)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

</style>

</head>

<body bgcolor="#CCCCCC">
9<img src="box.gif" width="125" height="250" /><br /><br />
8<img src="box.gif" width="125" height="250" /><br /><br />
7<img src="box.gif" width="125" height="250" /><br /><br />
6<img src="box.gif" width="125" height="250" /><br /><br />
5<img src="box.gif" width="125" height="250" /><br /><br />
4<img src="box.gif" width="125" height="250" /><br /><br />
3<img src="box.gif" width="125" height="250" /><br /><br />
2<img src="box.gif" width="125" height="250" /><br /><br />
1<img src="box.gif" width="125" height="250" /><br /><br />
0<img src="box.gif" width="125" height="250" /><br /><br />
</body>
</html>
If you view the example page, you will see there are 10 boxes displayed numbered from 9 down to 0, however, when you scroll down, you can only see half of box '0' and the scrollbar disappears off the bottom of the page. This happens on IE9, FF3.6, Safari 5.03 and Chrome 9.0.597.98.

I'm sure it's a simple fix, but it's eluded me for hours!

I'd appreciate any help!