How to make the footer stretch vertically?

Question

I have a 1 x 70 pixel footer that sets as background and tiles horizontally.

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

Here is the style that 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%;
}

alt text http://i34.tinypic.com/2q9xk02.jpg

I want the footer to look like this: alt text http://i37.tinypic.com/2ng4ew9.jpg

Answer 1

- ? , ...

body {
    background-color:#060;
}

. , .

, , .

Answer 2

, .

body {

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

Answer 3

position:absolute;
bottom: 0;

...

Answer 4

:

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

: "", "repeat-x", . ​​ "100%", , .

Answer 5

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

, , , .

Displays a space between the footer and col-middle alt text http://img266.imageshack.us/img266/7051/picture4vb3.jpg