[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 390
  • Last Modified:

Resize div height to height of browser window (-) 50px

I need to resize the main div of my site so that it does not stop at the bottom of the content, but goes all the way down to the bottom of the window. I am currently using safari (i would like a cross-browser compatible solution).
Here is my css:

#main {
 margin:0 auto;
 width:390px; height:100%;
 top:50px; bottom:0px;

I have tried several different ways of resizing through javascript to no avail( ie. document.getElementById('main').style.height = h; //h=document.height-50

Any ideas?

1 Solution
in a frame:
function resize(){  
var frame = document.getElementById("frame1");  
var htmlheight = document.body.parentNode.scrollHeight;  
var windowheight = window.innerHeight;  
if ( htmlheight < windowheight ) { document.body.style.height = windowheight + "px"; frame.style.height = windowheight + "px"; }  
else { document.body.style.height = htmlheight + "px"; frame.style.height = htmlheight + "px"; }  

Does that help?
dh2oingAuthor Commented:
It is only a div, but yes you helped: I forgot the ="px"

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now