Setting an element's height to 100%

They have: 222 posts

Joined: Sep 1999

Site: http://soulogue.com/?page_id=12
Stylesheet: http://soulogue.com/wp-content/themes/soulogue/style.css

I'm trying to get the white part (#content) to extend to the bottom of the page. I've set height and min-height to 100% for body, #container (which holds #content) and #content, but it is still is only as tall as the text pushes it to be in Firefox 1.0.1. In IE6 it adds much more space than it needs to.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I'm pretty sure you can't do height to 100%. I don't know why, but I guess the powers that be decided that it shouldn't be possible.

On a google I found a lot of work arounds though:

http://www.google.com/search?hl=en&lr=&q=CSS+height+100%25&btnG=Search
(reason why this won't work: on a web page, what is 100%? Is it the height of the window or the height of the page? What is the height of the page?)

Busy's picture

He has: 6,151 posts

Joined: May 2001

easy answer: 100% of what?
Answer would be the page, right? but how long is the page? Thispage for example has a scroll bar but is still one page (not talking print pages).
Different browsers have different margins, so really your saying 100% of 'up to infinity'

They have: 222 posts

Joined: Sep 1999

Thanks, I'm not sure how I missed all that info in my initial Google search.

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.