#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    4
    Rep Power
    0

    Question CSS <div> height property


    I am wondering if there is some way to make a <div> layer automatically expand to the full height of the screen similar to the way that one would use width=100% when talking about the width of a page.

    I have a layer that I want to extend to the bottom of the page no matter what resolution the user has on their screen. Maybe the layer could just extend all the way until the next layer?

    Any Ideas?

    Thanks

    Jamie
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Dec 2003
    Posts
    1,037
    Rep Power
    27
    Code:
    <style type="text/css">
    html, body { height: 100%; }
    #MYDIV { height: 100%; }
    </style>
    That is what you need I believe. Just give your div an id, and put it in the third line above where it says MYDIV.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    4
    Rep Power
    0
    That did not seem to work. It still gave me a scroll bar on the right even when I only had whitespace below. How does height: 100%; work?

    Jamie
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    The scrollbar could be caused by a non-zero border or margin (depending on the browser). Try this:
    Code:
    body { border:0; margin: 0; height: 100%; }
    #MYDIV { height: 100%; background-color: green;}
    Hope this helps,
    Jeroen
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    I was experimenting with this yesterday and also found that height : 100% gave an annoying right-side scrollbar. The solution is to find some value like 97% that doesn't give the scrollbar.

    Additionally, you have to make sure that if your block is inside another block, that the encapsulating block also has the correct height set.

IMN logo majestic logo threadwatch logo seochat tools logo