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 {
 position:relative;
 margin:0 auto;
 width:390px; height:100%;
 top:50px; bottom:0px;
 background-image:url(images/new_05.gif);
 background-repeat:repeat-y;
 padding-bottom:20px;
 min-height:380px;
}

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?

Thanks
dh2oingAsked:
Who is Participating?
 
softplusConnect With a Mentor Commented:
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?
0
 
dh2oingAuthor Commented:
It is only a div, but yes you helped: I forgot the ="px"
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.