First, since your site is in the buggy quirks mode, I would add this to the top of every page in your site:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
Then I would change this line:
-
frame.style.minHeight = document.height - height;
-
to this and test it out:
-
frame.style.height = (document.body.clientHeight - height) + "px";
-
Also my guess is that the function you wrote, initialize() is only executed when the page loads. If that's the case and someone resizes their screen, then you'll probably want to run that function again. Assuming you don't have any onresize events on your page, add this line of code outside of the function initialize() and just below it:
-
window.onresize = initialize;
-
Matt
Hello all,
I am trying to make a div on my website dynamically resize to to fill up any empty space left over on the users screen.
The code I am using now that works perfectly for Firefox is
- function initialize(){
-
frame = document.getElementById('frame');
-
headerHeight = document.getElementById('top').offsetHeight
-
headerMargin = 10;
-
footerHeight = document.getElementById('footer').offsetHeight
-
footerMargin = 16;
-
frameBorder = 2;
-
height = headerHeight + headerMargin + footerHeight + footerMargin + frameBorder;
-
frame.style.minHeight = document.height - height;
-
}
I know IE does not recognize minHeight property but I have tried other ways to accomplish my goal but no luck. Here is an example of what is going on. View this page in IE and Firefox and see the difference.
http://wow.guildprogress.com/user/quickAddGuild.php
Thanks for any replies!
1
