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

Posted on 2007-10-05
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
Question by:adypirvan
    LVL 28

    Expert Comment

    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

    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

    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

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

    Expert Comment

    You're welcome (cu placere ;)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Suggested Solutions

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    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 Browse or search based on font properties or name to find a suitable font for…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now