How do I make the footer stretch vertically?

Answer 1

You can use

position:absolute;
bottom: 0;

to put the footer at the bottom always...

Answer 2

Try the following:

.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%;
}

I changed two things: The background is set to "repeat" rather than just "repeat-x", so that it will also repeat down. And the height is set to "100%", which should make it expand to fill the available space.

Answer 3

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 4

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

body {

background: rgb(173, 173, 173);

}