Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10

Thread: div 100% height

  1. #1
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    What is the proper method of making a div expand to the height of its container?

    Code:
    <div style="height:100%">foo</div>
    ...does not work.

    This div is nested within a table cell of an unknown height and absolute values cannot be relied upon.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  2.  

  3. #2
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    There's a tutorial here:

    http://www.webmasterworld.com/forum83/200.htm

    but it doesn't seem to have a real solution for this, just a bit of a hack.

    I've suspected for some time now that defining a height of 100% for div's just isn't supported properly and have since designed around it.

  4. #3
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Don't try to validate and do height="100%" or height:100%; ever.

    It simply does not work. Try having no validation and see what happens. Also, try min-height:100%; not sure how that would work though.

    I'm not really sure about much, actually.


  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Height 100% works to a degree. you just have to use it properly.. W3C does not have as formal guidlines reguarding height as they do reguarding width, so browser manufactuers are left to fill in the holes on their own.. and its not intuitive.. I belive CSS3 will have better vertical positioning properties.

    Look at my company(as an example) site to see height 100% in action. The main content area appears to scale with the width of the window.

    Digiffect Studios (i have not tested this under any mac browsers, but should work fine in IE, Mozilla, and Opera.)

    You almost have to custom talor "height: 100%" for each application you want to use it. In my case it is scaling the html element, the body element, the container div, and the leftcol div with "height: 100%". I have had to also trim the bottom of the container div by 2 pixles to account for slight oversize. Other things you have to take into account are padding. set body and html to 0 padding. Its not perfect but you can get it to work usually..

    I forgot to mention a small problem with mozilla and opera.. when you have to scroll, the effect flakes out.. But its the best solution i have come up with using only CSS.


  6. #5
    Junior Member
    Join Date
    Dec 2003
    Posts
    6
    Member #
    4240
    the min-height property is not supported by IE (*gasp!*)

  7. #6
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    The browser that is giving me troubles is Safari, although a related problem is occuring in IE due to this.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  8. #7
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    I forgot to mention a small problem with mozilla and opera.. when you have to scroll, the effect flakes out.. But its the best solution i have come up with using only CSS.
    Glyakk - that's the main reason that I stopped using it.

  9. #8
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    I don't have the time right now, unfortunately, but I'd guess the answer might be here: http://www.alistapart.com/articles/footers/

    It's about putting footers at the bottom of the page, regardless of content height (bottom of browser window, or bottom of content depending on browser size) It doesn't rely on any javascript that I know of.

    good luck!
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  10. #9
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Originally posted by Brak
    I don't have the time right now, unfortunately, but I'd guess the answer might be here: http://www.alistapart.com/articles/footers/

    It's about putting footers at the bottom of the page, regardless of content height (bottom of browser window, or bottom of content depending on browser size) It doesn't rely on any javascript that I know of.

    good luck!
    that might be your solution.. it uses the DOM and javascript to help aid css..


  11. #10
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    A Javascript solution is highly undesirable...but I'm open to code suggestions.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com