Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2007-10-05
Medium Priority
Last Modified: 2013-11-19
   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
Question by:adypirvan
  • 3
  • 2
LVL 28

Expert Comment

ID: 20021867
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.
LVL 28

Accepted Solution

TName earned 1000 total points
ID: 20021932
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...

Author Comment

ID: 20022064
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.

Author Comment

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

Expert Comment

ID: 20022225
You're welcome (cu placere ;)

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question