How do I force a DIV block to extend to the bottom of a page even if it has no content?

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}

div#header
{
    width: 100%;
    height: 100px;
}
#header a
{
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}

#header, #menuwrapper    {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}

#menu #menuwrapper  {
    height:25px;
}

div#menuwrapper {
    width:100%
}

#menu, #content {
    width:1024px;
    margin: 0 auto;
}

div#menu    {
    height: 25px;
    background-color:#50657a;
}

html,body { height:100%; }

#content {
min-height: 600px;
height: auto !important;
height: 600px;
}

<div style="min-height: 100%">stuff</div>

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    }
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10;

         if (element.style.height < window.innerHeight) {
            element.style.height = window.innerHeight - (2 * margin)
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

height: 100%;