SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div - 100% height of content

    Hey everyone. Well, I'm working on a site for myself and I'm encountering another problem with css: I cant get my countainer div to expand to the height of the content. It works in IE, but I guess thats just cause IE is too lenient. In firefox, the container will be 100% height of the browser window, but will not go beyond that. Is there any way to get around this?

  2. #2
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave Shea (mezzoblue, zen garden) has a discussion on this subject, with a fix:

    "min-height fixed"

    http://www.mezzoblue.com/archives/20.../minheight_fi/

  3. #3
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I tried that, but I think it only applies to fixed heights, like 400px or 200px. I'm trying to do it with 100%. I tried setting

    Code:
    Container {
              padding: 100%;
    }
    
    container2 {
              margrin-top: -100%;
    }
    but that didn't work. I need someway for the background to always be atleast the height of the window, but also expand when there is more content than can fit inside the window.

  4. #4
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SitePoint's own Paul O'B gives a great tutorial here:

    http://www.sitepoint.com/forums/show...41&postcount=8

    A search of Google for "min-height:100%" turned up this page from September 9th, 2004 on css-discuss:

    http://archivist.incutio.com/viewlist/css-discuss/45552

    Keep trying the links if you get any 404's. There are a couple of working examples there.

    (Mods: I'm off to read the policies again to see if this last link is legal.)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if you try to achieve this because of the background, then just make two divs - one with 100% height which will have the second one inside with auto height and both will have the same background set. And by the way you have to specify this for mozilla to understand 100% - html, body {height: 100%;}
    Hope this helps.

  6. #6
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone! What fixed it was:

    Code:
    body {
              background: #000000 url("bg1.png") repeat-y top center;
    }
    Adding the backround to the body itself fixed everything. Thanks again! Now my page actually looks good in Firefox too!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tenfingers
    SitePoint's own Paul O'B gives a great tutorial here:
    Thanks for mentioning the FAQ - alot of people seem to miss them and they do contain a lot of answers to these sorts of questions - including some of the solutions offered in this thread

    A repeating background gif on the body is the easiest way to achieve 100% (and greater) height that works on nearly all browsers. Sometimes you may already have a background image so you can use a 100% container as long as you define it as described in the faq thread but you will loose a few browsers along the way.

    Mozilla will only inherit 100% from the html,body(height:100%) into the first container after the body and not into subsequent nestings The container must be min-height:100% for mozilla and then ie is hacked to be height:100%. If you declare mozilla as height:100% then thats all you will ever get.

    You can also declare an element as display:table and this allows mozilla to inherit the 100% into multiple nestings (Ie doesn't understand display:table but will inherit the 100% anyway)

    (Xerxos method is one that I used to fix ie5 mac but mac has to be in quirks mode to render the initial 100% height.)

    As I mentioned above some browsers (older safari and ie macs) don't co-operate with the min-height so the background image technique is the safest to use if the design allows it.

    Paul

  8. #8
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Thanks for mentioning the FAQ - alot of people seem to miss them and they do contain a lot of answers to these sorts of questions - including some of the solutions offered in this thread

    A repeating background gif on the body is the easiest way to achieve 100% (and greater) height that works on nearly all browsers. Sometimes you may already have a background image so you can use a 100% container as long as you define it as described in the faq thread but you will loose a few browsers along the way.

    Mozilla will only inherit 100% from the html,body(height:100%) into the first container after the body and not into subsequent nestings The container must be min-height:100% for mozilla and then ie is hacked to be height:100%. If you declare mozilla as height:100% then thats all you will ever get.

    You can also declare an element as display:table and this allows mozilla to inherit the 100% into multiple nestings (Ie doesn't understand display:table but will inherit the 100% anyway)

    (Xerxos method is one that I used to fix ie5 mac but mac has to be in quirks mode to render the initial 100% height.)

    As I mentioned above some browsers (older safari and ie macs) don't co-operate with the min-height so the background image technique is the safest to use if the design allows it.

    Paul
    I read your faq and it was extremely helpfull. Thanks for taking the time to write it! I am honestly amazed at the amount of knowledge here on SP.


Bookmarks

Posting Permissions

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