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

4Jan/100

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&gt;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!

About Samuel Page

Sam Page, co-founder and director at 7dots Digital Consultancy.

Tagged as: CSS, DIV Height, JavaScript Leave a comment

Comments (0) Trackbacks (0) ( subscribe to comments on this post )

No comments yet.

No trackbacks yet.

« How to remove image padding/margins in Internet Explorer 6 (IE6) Forcing vertical scroll bars in Firefox »

Samuel Page Digital Playground & Blog