Menu
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?
651
In a web browser, if the content of an IFRAME is longer or wider than the space afforded to it by the parent page, the window will automatically display scroll bars. While this behavior is sometimes desirable, in most cases it should be avoided.
1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%").
A simpler way is however, is to use a container div styled with overflow: hidden; to hide the scrollbar. Set the width and the height of the div, to be slightly less than that of your iframe. Hope this helps you.
Adding CSS body { overflow-y:hidden;}
removes the vertical scroll. If the iFrame content exceeds the page size the iframe will get a scroll bar instead of the page.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
