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

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
0
adypirvan
Asked:
adypirvan
  • 3
  • 2
1 Solution
 
TNameCommented:
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.
0
 
TNameCommented:
What I would suggest is this:
- set the height of html, body and #idMainContainer to 100%,
- set their margins and paddings to 0,
- put the banner div inside the main container (so their heights will *not* be added),
- let idMenu grow with it's content (don't set it's height to 100%)
- and simulate a full-height left menu div by vertically tiling (repeat-y) "butback.jpg" as a background-image of #idMainContainer...
0
 
adypirvanAuthor Commented:
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.
0
 
adypirvanAuthor Commented:
Now I saw your second post :), tried, and it works. Thank you a lot!
0
 
TNameCommented:
You're welcome (cu placere ;)
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

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