Updated to handle the case where the window height shrinks during resize, and to handle fricking IE. Also cleaned up the code.Today I wanted to set the height of a DIV to be the same as the browser window. It has a background image and border that needed to span the full height of the window, but I didn't want the vertical scroll bar activated to imply there was more content below the fold.
I'm sure there are better ways to do this, but I did it with Javascript. In the <HEAD>:
Then in the <BODY>:<script language="javascript" type="text/javascript">
function findElementById(id)
{
if (document.getElementById)
return document.getElementById(id);
else if (document.all)
return document.all[id];
else if (document.layers)
return document.layers[id];
}
function setMinHeight(x)
{
theElement = findElementById(x);
if(!theElement.style.minHeight || theElement.offsetHeight > parseInt(theElement.style.minHeight))
theElement.style.minHeight = theElement.offsetHeight + 'px';
}
function setHeight(x) {
theElement = findElementById(x);
windowHeight = window.innerHeight;
if(!windowHeight) // fricking IE
windowHeight = document.documentElement.clientHeight;
if(windowHeight > parseInt(theElement.style.minHeight))
theElement.style.height = windowHeight + 'px';
else
theElement.style.height = theElement.style.minHeight;
}
</script>
<body onresize="setHeight('contentDIV')">
<div id="contentDIV">
This is the main content on the page.
</div>
<script language="javascript" type="text/javascript">
setMinHeight('contentDIV');
setHeight('contentDIV');
</script>
</body>
Leave a comment