Archives for: June 2007, 06

Jun 06, 2007 : 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:

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

<iframe id="frame" src="" 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;

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

Update 10/4/2008: Eric P. noted a while ago that you need a doctype, and Ernest E. reminded me that I needed to update my example.

Technorati tags:

<  June 2007  >
Mon Tue Wed Thu Fri Sat Sun
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  




Syndicate this blog XML

powered by