html – DIV在表格单元格中高达100％_html-js-css

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" >                    Menu                </div>                <div ID="mainContent" >                    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" >        <table ID="container" border="0" cellspacing="0" cellpadding="0">            <tr>                <td ID="menu"><div>Menu</div></td>                <td ></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>

总结

以上是内存溢出为你收集整理的html – DIV在表格单元格中高达100％全部内容，希望文章能够帮你解决html – DIV在表格单元格中高达100％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1113609.html