I don't think this is the best approach, particularly as IE can mis-behave on first loading the page - it can fail to correctly determine the browser height until the page is loaded.
Tweaking the code as follows will reduce the number of scrollbars appearing:
Code:
elem.style.height = (hgt-20) + 'px';
In particular, this should prevent the scrollbar for the browser window appearing (unless there is other content on the page).
Sometimes the best approach is to do nothing
. Either just let the iframes assume the height of their content or, perhaps better, just set them all to a specific pixel height: scrollbars will only then appear if the content is taller than the height you set.
The previous approach metioned was to set the html and body height to 100%, and set the iframe heights to, perhaps, 80%. Then the iframe heights would adjust if the browser is resized. (I think I still prefer the fixed pixel height approach
)
Out of interest
I modified the code so that it resizes the iframes when the browser is resized, below. But I'm still having to reload the page in IE before it behaves
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't always work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>
<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>