Log in

View Full Version : CSS for a auto stretching footer?



pxlcreations
12-08-2010, 09:58 PM
Hi all... its been awhile but I'm working on a new page and I need help with my footer. I have a footer with a set height and then I have a div below it. I want the div below it to be auto stretching vertically until it reaches the footer with the set div. What would my css be for this? I tried this below:

CSS


#footer{
background-color:black;
width:100%;
height:255px;
}

.footerspacer{
bottom:0
position:absolute;
width:100%;
height:100%;
}


HTML


<div id="footer"></div>
<div class="footerspacer"></div>


But what ended up happening was that the stretching part stretched to the very top of the page, covering all of the content. How can I get it to just stretch up to the footer div?

neparker
12-09-2010, 04:53 AM
I think I fixed it. I just put a set 221px in place of my 75% height.

pxlcreations
12-09-2010, 12:33 PM
What 75% height?

traq
12-09-2010, 02:39 PM
perhaps this (http://ryanfait.com/sticky-footer/) would be what you're looking for?

pxlcreations
12-11-2010, 03:15 PM
I thought about that Traq, but here is what I want to happen:

http://i.imgur.com/IoP6I.png

On the left is what happens when you view the page, and I want the space below the footer to fill up with the color black.

traq
12-11-2010, 11:39 PM
just make your <body> background solid black. Put the actual background (blue/grey waves) inside a wrapper div.