Iframe/CSS: Forcing Iframe to fit screen

I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).

My objective is having the iframe fit only 85% w开发者_C百科idth of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)

HTML

<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>

CSS:

.maindiv {
width: 85%; 
top: 100px;
}

.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}

If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!

Use the onload() event of your iframe and the onresize() event of the window to resize the iframe to the required size.

This Microsoft Support article explains it well.

FYI, in javascript screen.width & screen.height will give you the screen resolution.

If you had Fx4, a simple height: -moz-calc(100%-100px) would work a wonder. A pity this feature is introduced and supported so late in CSS3.

If the 100px top is for tabs navigating the iframe, there may be a workaround. Just fill up your iframe to 100% height and then put those tabs inside the iframes as another iframe with a fixed size. Or just resort to frameset.

Whether this works for you or not depends on your exact design, but hope that helps.