How do I make the footer stretch vertically?

Question

I have a footer that is a 1 x 70px, which is set as the background and tiles horizonally.

In cases when the web page does not contain a lot of content on it, it will display the footer above where the footer should be. I want it to fill in with a solid color, so if they scroll down, it won't show the footer, then the white under the footer.

Here is the style I have for the footer.

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat-x top left;
    color:#fff;
    font-size:12px;
    height: 70px;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
}

I want the footer to look like this:

Answer 1

Please clarify - do you want solid green at the bottom? If so, just set a green background for body...

body {
    background-color:#060;
}

That should give you the result in your second screenshot. Change the color to match the bottom of your gradient image.

If you want the foot pegged to the bottom, use the absolute positioning mentioned, and set the background to match the top of the gradient image.

Answer 2

You could change your body style so that the footer blends in.

body {

background: rgb(173, 173, 173);
}