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

<p>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.</p>

<p>Here is the style I have for the footer.</p>

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

<p><img src="https://i.stack.imgur.com/pUzIQ.jpg" alt="alt text"></p>

<p>I want the footer to look like this:
<img src="https://i.stack.imgur.com/s96Ft.jpg" alt="alt text"></p>

You can use
```
```
position:absolute;
bottom: 0;
```
```
to put the footer at the bottom always...