CSS... div autosize table cell vertically?

programming web dev
1

Hey all,
Kind of a random question… but I’ve got a header, a body, and a footer, all each in their own table cells. I’d like the footer to stay at the bottom of the browser window and have the main body cell, containing the “body div” resize accordingly. does anyone know how I can do this?

 
<table width="735" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="144"><div id="headercontent">header content</div>
 
 </td>
  </tr>
  <tr>
    <td height="100%" valign="top" background="img/yscroll.jpg"><div id="bodycontent">body content here. lllllll</div></td>
  </tr>
  <tr>
    <td height="79" valign="top"><div id="footercontent">footer content</div></td>
  </tr>
</table>

my css looks like:

 
#headercontent {
 width: 733px;
 height: 144px;
 background: url(../img/head.jpg);
 background-repeat: no-repeat;
}
#bodycontent {
 font-family: Verdana, Arial, Helvetica;
 font-size: 10.5px;
 width: 733px;
 height: 100%;
 text-align: left;
}
#footercontent {
 width: 733px;
 height: 75px;
 margin-left: -1px;
    margin-right: auto;
 background: url(../img/footer.jpg);
 background-repeat: no-repeat;
}

thanks a bunch