Div - 100% height of content

[c1vineoflife]

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?

[tenfingers]

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/

[c1vineoflife]

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

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.

[tenfingers]

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.)

[Xerxos]

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.

[c1vineoflife]

Thanks everyone! What fixed it was:

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!

[Paul O'B]

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

[c1vineoflife]

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.