100% height with CSS?

Discussion in 'General Software Discussion' started by Malus, Apr 11, 2003.

  1. Malus

    Malus BSD SMASH!

    Joined:
    May 13, 2002
    Messages:
    1,170
    Likes Received:
    3
    Trophy Points:
    0
    Currently, I'm working on a site, in XHTML 1.1 Strict, which requires something to have a height of 100%. However, when I use the CSS attribute for height, it doesn't do the job. Is there actually any way for me to get an element to have a height of 100%?

    This one has been bugging me for a while; I really don't want to resort to using a less strict document type for my page.
     
  2. Jeff

    Jeff Yarr... I be blind!

    Joined:
    May 6, 2002
    Messages:
    3,191
    Likes Received:
    8
    Trophy Points:
    48
    I think it depends on the element, which element are you trying to make 100%?
     
  3. Malus

    Malus BSD SMASH!

    Joined:
    May 13, 2002
    Messages:
    1,170
    Likes Received:
    3
    Trophy Points:
    0
    Well, I've tried both <div> and <table>, but to no avail. I know the height works with pixels though, so I assume that the percentages are just broken. What I really want is for my content area to extend to the bottom of the browser window, even if I don't have any content to fill it up.
     
  4. Jeff

    Jeff Yarr... I be blind!

    Joined:
    May 6, 2002
    Messages:
    3,191
    Likes Received:
    8
    Trophy Points:
    48
    try setting the height to 100% on body and html, and see if that works.
     
  5. Malus

    Malus BSD SMASH!

    Joined:
    May 13, 2002
    Messages:
    1,170
    Likes Received:
    3
    Trophy Points:
    0
    Wow. Though that seemed like a pretty weird thing to do, it actually worked! Well, I had to stick a 100% height tag in my html, body, and the main element of my page. Thanks.
     
  6. EvilTypeGuy

    EvilTypeGuy New Member

    Joined:
    Apr 20, 2003
    Messages:
    23
    Likes Received:
    0
    Trophy Points:
    0
    Well, if you read the spec, this is actually correct. IE will seems to let you do it without setting 100% on all the parent tags (body, html, etc.) but Mozilla interprets the spec pretty literally which basically says that width and height percentages are always relative to the size of the parent containing block. Of course what determines the size of the body or html tags? That's where the interpretation of the spec gets creative. Mozilla decides it's the size of the parent tags up to the maximum of the viewport. IE says it's by default the size of the viewport at the last parent tag before the body or html tags.
     
  7. UberLord

    UberLord A Legend in Underwear

    Joined:
    May 8, 2002
    Messages:
    5,255
    Likes Received:
    4
    Trophy Points:
    0
    If you put Mozilla into quiks mode via the DOCTYPE tag you can get away with quite a bit - but I wouldn't recommend it
     
  8. LordOfLA

    LordOfLA New Member

    Joined:
    Mar 23, 2003
    Messages:
    4
    Likes Received:
    0
    Trophy Points:
    0
    okay I know this is an old thread but I recently had this problem myself.

    My solution was to use php and feed Mozilla's rendering engine an XHTML 1.0 Transitional DOCTYPE.

    In XHTML 1.1 Strict it follows the w3c guildines a little too strictly, rather than using common sense.
     
  9. Malus

    Malus BSD SMASH!

    Joined:
    May 13, 2002
    Messages:
    1,170
    Likes Received:
    3
    Trophy Points:
    0
    Eh, but having to feed different DOCTYPES to different browsers seems kind of silly.
     
  10. UberLord

    UberLord A Legend in Underwear

    Joined:
    May 8, 2002
    Messages:
    5,255
    Likes Received:
    4
    Trophy Points:
    0
    Seems silly, but it works. I have a php class that spits out custom stuff for different browsers to achieve the same effect.
     
  11. BoJohansen

    BoJohansen New Member

    Joined:
    Aug 30, 2004
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    This really worked well.

    Can anyone off you guys tell me how to stick a footer at the bottom of the page using this 100% method??
     
  12. BoJohansen

    BoJohansen New Member

    Joined:
    Aug 30, 2004
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Never mind.............. i werent thinking straight *LOL*

    Figured it out :)
     

Share This Page

visited