Extend div to bottom of page

I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.

Here's my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <link rel="stylesheet" href="../cssReset.css" />
    <style>
        html, body {
            height: 100%;
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>

Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.

What can I do?

Thanks.

Solution

You could always take the easy way out and use JavaScript. Here's a simple example.

<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
    var menu = document.getElementById("menu");
    var center = document.getElementById("center");
    var main = document.getElementById("main");
    var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
    main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>