iframe 100% height causing vertical scrollbar
- by Keevon
I'm trying to layout a design that has a fixed height header at the top of the screen, and then an iframe below taking up the remaining space. The solution I came up with is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
</head>
<body>
<div style="height:70px;background-color:blue;"></div>
<div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
<iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
</div>
</body>
</html>
Essentially, I'm creating an absolutely positioned div below the header and sizing it to take up the rest of the space, then putting the full size iframe in there.
The problem I'm running into is that if you paste the code exactly as seen below, using XHTML Strict, in each browser (tested w/ chrome/safari/ie8) you will see a vertical scroll bar with a few pixels of white space below the div.
Doing some experimenting, I found that if I remove the doctype completely it works in safari/chrome, but IE gets even worse, setting the iframe height to 300px or so. If I set the doctype to transitional, it works in safari/chrome but has the same problem as in the strict case for IE8. If I use the HTML5 doctype, it has the same problem as strict in all browsers.
Finally, if I remove the iframe in any of these cases, everything is laid out just fine.
Anyone have any ideas?
