asked on

DIV's height 100% fill more than 100% of viewport

Hello!
I have a problem when I tried to convert a site layout made with <table> elements to another one made with <div>. I have a left navigation menu that I want to fill 100% of my browser page. I used a div for menu nested in another one for site container. The problem is I can't find the proper setting for height to fill the page right. Always it fills more with approx 150px in FF and IE6.
I tried to use document.body.clientHeight to calculate height and to subtract those 150px but this it seems it's working only in IE. Anny suggestions are welcome :)
The page can be viewed at http://www.coreli.ro/test/index2divtest.html

TName

Hi, the banner has "height:117px;" assigned - these 117 px will simply be added to the 100% you specified for #idMenu, so your page's height will always exceed the height of the viewport by at least 117 px (100% + 117px). Margins and paddings (and borders, if any) will also be added, the ones you might specify and also the default ones.

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adypirvan

ASKER

Thanks for the input! You were right with that, I've added "margin-bottom:-117px;" to #idMenu and now it fit's perfectly in IE :) but in FF I still have exactly 117px over the viewport. Same as before adding this line. I updated the page if you want to check. I will try to make another slices on my .psd file to organize it in a more popular 3 column layout if I can't handle that way.

adypirvan

ASKER

Now I saw your second post :), tried, and it works. Thank you a lot!

TName

You're welcome (cu placere ;)