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.