DIV在表格单元中拉伸至高度100％ [英] DIV stretch to height 100% in a table cell
问题描述
我有以下布局：
4个圆角背景和两个面板（左面板和右面板）。
目前我实现的布局如下：
有9个单元格的表：
top left corner | |右上角
| left div right div |
左下角| |右下角
代码：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< body>
< table id =contentwidth =100％border =0cellspacing =0cellpadding =0>
< tr>
< td>
< img src =corner1.jpg/>< / td>
< td>
< / td>
< td>
< img src =corner2.jpg/>< / td>
< / tr>
< tr>
< td>
& nbsp;< / td>
< td valign =topheight =100％>
< div id =menustyle =float：left; width：235px; height：445px; background-color：＃660000>
菜单
< / div>
< div id =mainContentstyle =float：left; margin-left：10px; height：100％; background-color：＃888888>
主要内容
< / 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 / cssmedia =screen>
#menu {
width：235px;
height：445px;
background-color：＃660000
}
#mainContent {
height：100％;
width：auto;
background-color：＃888888
}
#container {
width：100％;
}
< / style> ;,
HTML
< table id =contentwidth =100％border =0cellspacing =0cellpadding =0>
< tr>
< td>< img src =corner1.jpg/>< / td>
< td>& nbsp;< / td>
< td>< img src =corner2.jpg/>< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td valign =topstyle =padding：0px;>
< table id =containerborder =0cellspacing =0cellpadding =0>
< tr>
< td id =menu>< div>菜单< / div>< / td&
< td style =width：10px>< / td>
< td id =mainContent>< div>主要内容< / div>< / td&
< / tr>
< / table>
< / td>
< td>& nbsp;< / td>
< / tr>
< tr>
< td>< img src =corner3.jpg/>< / td>
< td>& nbsp;< / td>
< td>< img src =corner4.jpg/>< / td>
< / tr>
< / table>
I have following layout:
4 rounded corners background and two panels (left panel and right panel) inside it.
Currently I implement the layout as follows:
Table with 9 cells:
top left corner | | top right corner |left div right div| bottom left corner | | bottom right cornerCode:
<!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>What I want to ask is how I can stretch the height of the right div to 100% so that it equals to the height of the td (height of left div will increase according to users' action).
I have tried many ways and still cannot figure it out.Set height of div to 100% does not work.
What should I do to acheive this? Don't use table?
PS:
The code is changed. You can paste the code into the notepad and test it in IE.
The code is edited again to add the DOCTYPE.
解决方案Seeing as you already have tables for layout, I wouldn't really bother trying to do it the "right" way.
Just use another table.
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>
这篇关于DIV在表格单元中拉伸至高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
