Full height div with without scrollbars

[tman563]

Here is how my site is currently set up

#container - centered on page, contains the rest of the page
#header,blackbar - logo and misc stuff at the top of container
#content - within container, holds two columns (a nav bar and the page text)
#footer - after content

I want the container to always span the full height of the browser. I want the footer to be at the bottom of the page. Not stationary at the bottom of the browser, but the bottom of the PAGE (so if you have to scroll through content, the footer isnt until the end, and will be at the bottom of the browser THEN).

I was developing this on a page with small content, so didn't have to scroll. I got it the way I wanted, where the container spanned the full browser height, with the footer at the bottom. But then I added more content, and the footer is still below all of it, but the container (white background, whereas the body background is blue) stopped after the first page of scroll. So i added "overflow: auto" to the container, and it now all works how i want, except there are scroll bars on the container, which I don't want.

#container {
width: 950px;
height: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
color: #000000;
background: #ffffff;
margin: auto;
position: relative;
overflow: auto;
}

#content {
width: 950px;
padding: 15px;
overflow: auto;
background: #ffffff;
}

#footer {
width: 100%;
background: #505050;
color: #ffffff;
font-size: 85%;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
bottom: 0px;
position: relative;
}

[CSS_Kidd]

2 things here...

Set the container margin to margin: 0 auto; and when you set the overflow to auto on any "container", when it does over flow it will add the scroll bars. I would remove it out of the #content as well.

Also depending on the effect you want (some pages may not have full content but you want the container to extend to the bottom), you may not want to have the container height at 100%. There are various methods for this effect, but it is unclear that this is what you want. Let us know.