SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Narragansett, RI
    0 Post(s)
    0 Thread(s)

    Div Height = 100% - 50px


    I know this has probably been asked over and over already, but I am struggling to find a thread w/ exactly what I need.

    I am creating a page that has 3 divs. A header, a nav bar, and a content div. They are all listed from top to bottom. I have the header with height: 30px;, the navbar with height: 20px and then I need the content div to stretch to the rest of the browser window.

    Now, on top of this, I need the content div to put up a scroll bar on overflow instead of growing further. The end product should be 3 stacked sections, the top 2 50px and the bottom one the rest of the frame and scrollable.

    Unfortunately, when I set it up, I get the 50px for the top two and then a layer that would be 100% of the window height had the 50px not been there. I tried putting them all in a container div w/ 100% height but I still got the same problem.

    Any help would be greatly appreciated!


  2. #2
    SitePoint Zealot pionar's Avatar
    Join Date
    Nov 2003
    0 Post(s)
    0 Thread(s)
    When you specify the 100%, that's what it means, 100% of the parent element, in this case, the body. You need to use proportional spacing for all the divs, or use absolute spacing for all the divs. It makes it much harder to control them when you mix the two. Or, you could use some neato-keen Javascript-fu to get the height of the client window and adjust the size of the content div accordingly. Then use the overflow property to add the scrollbar. That's personally what I would do, though I'm sure ohters would disagree.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    This is easy to do in mozilla and good browsers because all you need to do is set the top and bottom positions accordingly and the element stays on the bottom and at the top position as required.

    Unfortunately ie does not obey these rules so the only solution is a bit convoluted.

    I originally posted this as a test in the forum in this thread.

    The answer to the problem is in this layout:

    However it relies on a bit of hacking for both browsers (moz and ie - I haven't tested other browers) and forcing quirks mode for ie with the xml prologue. ()

    You can study it if its any use and borrow the code but its not that elegant a solution .



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts