我有如下布局：
4个圆角背景和两个面板(左面板和右面板)。
目前我实现的布局如下：
9个细胞表：
top left corner | | top right corner
|left div right div|
bottom left corner | | bottom right corner
码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="corner1.jpg" /></td>
<td>
</td>
<td>
<img src="corner2.jpg" /></td>
</tr>
<tr>
<td>
</td>
<td valign="top" height="100%">
<div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000">
Menu
</div>
<div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888">
Main Content
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="corner3.jpg" /></td>
<td>
</td>
<td>
<img src="corner4.jpg" /></td>
</tr>
</table>
</body>
</html>
我想问的是如何将正确的div的高度拉伸到100％，使其等于td的高度(根据用户的操作，左边div的高度会增加)。
我尝试了很多方法，仍然无法想象出来。将div的高度设置为100％不起作用。
我该怎么做才能达到这个目标？不要用桌子？
PS：
解决方法
看到你已经有了布局的表格，我不会真的打算试着做这个“正确”的方式。
只需使用另一个表。
CSS
<style type="text/css" media="screen">
#menu {
width:235px;
height:445px;
background-color:#660000
}
#mainContent {
height:100%;
width:auto;
background-color:#888888
}
#container {
width:100%;
}
</style>
HTML
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="corner1.jpg"/></td>
<td> </td>
<td><img src="corner2.jpg"/></td>
</tr>
<tr>
<td> </td>
<td valign="top" style="padding:0px;">
<table id="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menu"><div>Menu</div></td>
<td style="width:10px"></td>
<td id="mainContent"><div>Main Content</div></td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td><img src="corner3.jpg"/></td>
<td> </td>
<td><img src="corner4.jpg"/></td>
</tr>
</table>
