html – DIV在表格单元格中高达100％

发布时间：2020-12-14 21:41:47 所属栏目：资源来源：网络整理

我有如下布局：

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>
                &nbsp;</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>

HTML

<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><img src="corner1.jpg"/></td>
    <td>&nbsp;</td>
    <td><img src="corner2.jpg"/></td>
</tr>
<tr>
    <td>&nbsp;</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>&nbsp;</td>
</tr>
<tr>
    <td><img src="corner3.jpg"/></td>
    <td>&nbsp;</td>
    <td><img src="corner4.jpg"/></td>
</tr>
</table>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!