SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Div - 100% height of content
Hybrid View
-
Oct 23, 2004, 14:38 #1
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?
-
Oct 23, 2004, 16:10 #2
- 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/
-
Oct 23, 2004, 17:04 #3
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%; }
-
Oct 23, 2004, 18:55 #4
- 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.)
-
Oct 23, 2004, 23:40 #5
- 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.
-
Oct 24, 2004, 01:49 #6
Thanks everyone! What fixed it was:
Code:body { background: #000000 url("bg1.png") repeat-y top center; }
-
Oct 24, 2004, 05:26 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by tenfingers
- 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
-
Oct 24, 2004, 07:52 #8
Originally Posted by Paul O'B
I am honestly amazed at the amount of knowledge here on SP.
Bookmarks