我有以下布局:
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:
代码已更改.您可以将代码粘贴到记事本中并在IE中进行测试.
再次编辑代码以添加DOCTYPE.
鉴于您已经有了用于布局的表格，我不会真正费心尝试以“正确”的方式进行操作。
只需使用另一张桌子即可。
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>
超文本标记语言
<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>
| 归档时间： |
|
| 查看次数： |
42824 次 |
| 最近记录： |