How do I make sure that my footer shows all the way at end of the page rather than in the middle?

Here's my footer css:

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absolute;
      text-align: center;
      width: 100%;
      }

On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?

Solution

like so

  <!DOCTYPE html>
<html>
<head>
    <title>My Amazing Footer</title>
    <style>
    html, body {
       margin:0;
       padding:0;
       height:100%;
    }
    .wrapper {
       min-height:100%;
       position:relative;
    }
    footer{
        background:#F1F1F1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height:300px;
    }

    footer p{
        text-align: center;
        padding-top:100px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="Content">
            <p>HTML Ipsum Presents</p>
        </div>
        <footer>
            <p>&copy; My Website 2013. All Rights Reserved!</p>
        </footer>

    </div>
</body>
</html>

see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/