Full Page Height with Elastic Content Area
http://madclassifieds.000k.net/lib/
http://madclassifieds.000k.net/lib/main.css
I'm trying to create a site, where the page runs into the top and bottom of the browser (http://www.happycog.com, http://www.maxdesign.com.au)
Normally, I'd just use a background image for body, but the content area has to be elastic, and thus stretch. I've googled around, and can't find anything that will work.
Suggestions, ideas, examples?
Abhishek Reddy posted this at 02:44 — 14th December 2004.
He has: 3,348 posts
Joined: Jul 2001
Both Happy Cog and Maxdesign use fixed widths and backgrounds.
If you really must have elastic widths, then slice up the edges of the background image into left, centre and right blocks. Use nested divs, as in onion skinned shadows, to get them to show up on the flanks, and use the centre background (which could just be a flat colour) for the main div.
Dragon of Ice posted this at 00:42 — 21st December 2004.
He has: 578 posts
Joined: Jun 2004
Thanks for the link, but I didn't quite understand the article. It's OK though, because I got it to work somehow... not exactly sure. Anyway, now the problem is that when the content in < p > gets too big, it just continues, leaving the div it's nested in. Why is that. To see what I mean, check it out in 600x800.
Dragon of Ice posted this at 16:14 — 23rd December 2004.
He has: 578 posts
Joined: Jun 2004
Sorry for the bump, but this is really bugging me. I've scoured the net, looked at source code after source code, and I still can't figure it out. The problem is that if the content gets too long, it just continues out of the wrapper div. I've tried setting height to auto and just having min-height, but no luck. I really could use some help if anyone's got ideas.
Here's what it looks like without setting the heights on body, html, or wrapper. Shouldn't they stretch for the content?
http://madclassifieds.000k.net/lib/2/lib
CptAwesome posted this at 22:39 — 27th December 2004.
He has: 370 posts
Joined: Dec 2004
If you want the to be a fixed height, and the content scroll in it, like with an iframe then you can set
div { overflow: scroll;} (explained: http://www.quirksmode.org/css/overflow.html)
You might also try the position:relative style code, but I am not sure exactly what you are try to do so....
Dragon of Ice posted this at 21:22 — 28th December 2004.
He has: 578 posts
Joined: Jun 2004
all I want is for the container div (div.content or content-container, something like that) to stretch with the content, but have a minimum height of 100%. Shouldn't min-height do that?
Dragon of Ice posted this at 03:23 — 29th December 2004.
He has: 578 posts
Joined: Jun 2004
Yes, yes, yes, YES!!! I fixed it with overflow: auto;!
Brian07002 posted this at 05:33 — 29th December 2004.
They have: 16 posts
Joined: Aug 2004
Even though not cross browser compliant, I would suggest using a gradient fill background color...Most delightful on the eyes!
Ta ta
-Brian
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.