Stretch footer to bottom of browser window

I’m not looking for a Sticky Footer solution here. What I want is for the footer, the final containing div, to extend to the bottom of the browser window.

Here’s the code. If I have to use Javascript, that’s fine. This doesn’t have to be a pure CSS solution.

Thanks!

[CODE]*{margin:0;padding:0;}

html {
}

body {
background: #000 url(../images/bg_patt.gif) repeat left top;
}

#header {
margin:0px auto;
height:68px;
width:818px;
overflow:hidden;
background-color:pink;
}

#navbar {
margin:0px auto;
height:39px;
width:818px;
overflow:hidden;
background-color:teal;
}

#main_content {
margin:0px auto;
overflow:hidden;
width:818px;
background-color:yellow;
}

#footer {
margin:0px auto;
height:39px;
width:818px;
padding-bottom:60px;
background-color:magenta;
}[/CODE]

[CODE] <!–begin header–>
<div id=”header”>
header
</div>
<!–end header–>

<!–begin navbar–>
<div id=”navbar”>
navbar
</div>
<!–end navbar–>

<!–begin main_content–>
<div id=”main_content”>
maincontent
</div>
<!–end main_content–>

<!–begin footer–>
<div id=”footer”>
footer
</div>
<!–end footer–>[/CODE]

Also in #CSS _↴