6 Jun 2007 brondsem   » (Journeyer)

100% height iframe

So <iframe height="100%"> doesn't make an iframe fill all the remaining portion of a window like you might expect. I found several places where people showed how they got it to resize with javascript, but those didn't work for me. The DOM properties that they used were frequently the "page" height (e.g. 250px for a short content page, 1300px for a tall page that has scrolling) or something else wrong. Here is what works for me (in Firefox 2 and IE 7) to make an iframe be as high as possible without causing the main window to have scrolling:

  
<html>
<head>Test Page</head>
<body>
<h1>Check out the cool page below</h1>
<p><a href="/">Go back home</a></p>

<iframe id="frame" src="http://google.com/" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= document.getElementById('frame').offsetTop;
    
    // not sure how to get this dynamically
    height -= 20; /* whatever you set your body bottom margin/padding to be */
    
    document.getElementById('frame').style.height = height +"px";
    
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>

Hopefully this may help someone in the same situation.. your mileage may vary.

Technorati tags: iframejavascript

Syndicated 2007-06-06 16:58:41 (Updated 2007-06-06 17:13:24) from Dave Brondsema's Blog - Programming

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!