[SOLVED] How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

I haven't added content to my page yet, since I'm still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would be if the page was taller, it's in the middle of the page, right below the header.

I know this is what should happen in CSS, but how do I make it go to the bottom? I try position: fixed; bottom: 0px;, but it goes to the bottom, and when I add more content, it will either overlap or go under the content.

Edit: I need the footer to be adjustable height. In other words, I can't use height: 100px; or whatever. Also, I don't want the footer to stick to the bottom of the screen if the content is larger than the page size. If the screen height is 720px, and the page is 1200px, the footer shouldn't be at the bottom of the screen. It should be at the bottom of the page, out of view.

How can I fix this problem? I'd like to without using JavaScript.

Here is my current page. My footer is not a fixed height, and I can't use solutions that require that.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body
            {
                font-family: Lato;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
            header
            {
                height: 80px;
                padding-left: 20px;
                padding-right: 5px;
                padding-top: 15px;
            }
            header h1
            {
                display: inline;
            }
            header nav
            {
                float: right;
                font-size: 18pt;
            }
            header nav a
            {
                color: #999;
                line-height: 50px;
                margin-right: 20px;
                text-decoration: none;
            }
            header nav a:hover
            {
                color: #666;
            }
            header nav a.currentPage
            {
                color: #7a7acc;
            }
            header nav a.currentPage:hover
            {
                color: #7a7acc;
            }
            footer
            {
                background-color: #f2f2f2;
                color: #666;
                font-size: 12pt;
                padding: 20px;
                text-align: center;
            }
            footer div
            {
                max-width: 750px;
                margin: 0px auto;
            }
            footer a
            {
                color: #666;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>
                <img src="logo.png" />
            </h1>
            <nav>
                <a href="/" class="currentPage">Home</a>
                <a href="/services">Services</a>
                <a href="/news">News</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>
        <footer>
            <div>
                <p>Footer text. Footer text. Footer text.</p>
            </div>
        </footer>
    </body>
</html>

Solution

Use css tables:

FIDDLE1 - little content

FIDDLE2 - little content + large footer

FIDDLE3 - lots of content

Markup

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}