Samuel Page Digital Playground & Blog

4Jan/100
how-to-set-a-div-to-the-height-of-your-sites-page

How to set a DIV to the height of your site’s page

Posted by Samuel Page

Ever wanted to add a semi-transparent overlay to your site, but can't get the div to be the complete height of your page across different browsers?

This bit of JavaScript should do the trick:

function zxcBdyWH(){ if (document.body.scrollHeight>document.body.offsetHeight) return 
[document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac return 
[document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac; }

This basically works out the total height of your page, then onload set the height of your div (using the correct ID) the the height of the page:

<body onload="document.getElementById('overlay').style.height=zxcBdyWH()[1]+'px';">

This is necessary in all brosers, but particularly useful in Internet Explorer 6!

Tagged as: , , No Comments
   

Categories

General links

Archives

Tags

CSS DIV Height Firefox IE6 JavaScript min-height Scrollbar

Register