在这个论坛上已经多次提出基本问题，但从未得到满意的回答，IMO。如何在表格单元格中拉伸div以使其填充单元格（垂直，水平或两者）？
Make a div fill an entire table cell
Stretch div to 100% of height in a table cell
Streching div vertically inside a table cell
How can I scale a div to 100% height and width inside of another element
100% height div inside a display:table-cell div
等等。
是的我知道我将被视为另一个化石，因为在我应该完全通过优雅的CSS创建表格时，在桌面单元格中嵌入div是一种思想，正如Rachel Andrew和Kevin Yank在 Everything中所颂扬的那样你知道CSS是错的！（2008）。但在尝试了他们和其他人所写的内容之后，我对此印象不深。他们“成功”的秘诀在于依靠 display：table 系列属性创建一个CSS“表”，那么你最终会得到什么呢？一个div（框），表现为表，表行或表格单元格。你不能使它的角落圆角（我需要在表格单元格中嵌入div的一个原因），没有规定跨越行和列（我需要）并且你不能将任何封闭的div拉伸到全高而没有将它嵌入另一个盒子或桌子中，所以就这个问题而言，你会回到正方形。表格不能成为好的div，，反之亦然。
作为上述链接帖子之一中提及的人，基本问题是表格单元格不会将其高度（以像素为单位）自愿包含在任何包含的div中，因此包括“height：100％”或甚至“min-height：100没有其他解决方法的样式表中的％“将被忽略。细胞是细胞，div是div，除非你方便使用Javascript，否则我们不会满足。我只是想要一个非脚本，强大的标记来使特定div的垂直高度与封闭表格单元格的垂直高度相匹配，这样如果相邻单元格更高，我的div将在整个行拉伸时拉伸，以保持100％。
我不想使用 position：absolute;顶部：0; bottom：0 具有以像素为单位的已定义单元格高度，因为行高将取决于最高的单元格的高度。
嗯，我以为我实际上已经实现了圣杯，如下所示。这是一个包含3个div的单行表（实际上是HTML5中的导航）。我希望中间（即第二个）伸展到行的整个高度。 （添加 - 因此，当文本附加到第1列或第3列或从第1列或第3列中删除时，因此延伸或收缩整行的垂直高度，第2列将始终保持在包围它的单元格的完整垂直高度。这意味着如果相邻列包含更多文本，则文本下方的额外空格（粉色空格，请参见代码！）。此外，如果第2列包含的文本多于第1列或第3列，则无关紧要;就我而言，它们可能会缩小。） <!DOCTYPE html>
<html>
<html lang="en">
<meta charset="utf-8">
<title></title>
<link href="style4.css" rel="stylesheet">
</head>
<body>
<table id="tbl_main" border="1" style="width:60%; table-layout:fixed">
<!-- Creates columns of equal width -->
<tr class="v_align_top">
<td><nav id="col1" class="normal">COL 1 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </nav>
</td>
<td height="100%">
<table id="tbl_inner">
<tr>
<td style="height:100%">
<nav id="col2" class="vstretch">COL 2 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
</nav>
</td>
</tr>
</table>
</td>
<td><nav id="col3" class="normal">COL 3 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</nav></td>
</tr>
</table>
</body>
</html>
这是CSS：
#tbl_main {
border: 1px solid black;
border-collapse:collapse;
}
#tbl_inner {
border: 1px solid black;
border-collapse:collapse;
height:100%; /* min-height doesn't work here */
}
tr.v_align_top{
vertical-align: top;
}
.normal {
border-radius: 20px 20px 20px 20px;
border: 3px solid rgb(0, 0, 0);
padding: 10px;
}
.vstretch {
border-radius: 20px 20px 20px 20px;
border: 3px solid rgb(0, 0, 0);
padding: 10px;
}
#col1 {
background-color: rgb(220, 220, 220);
margin:5px;
}
#col2 { /* stretch to 100% height of table cell */
background-color: rgb(255, 220, 220);
margin:5px 5px 5px 5px;
height:100%;
}
#col3 {
background-color: rgb(220, 220, 220);
margin:5px;
}
（已添加）您可以在此处播放：jsFiddle link
以下是它的外观（Windows 7上的Firefox 10）：
不幸的是，由于我还没有足够的帖子来获得直接发布图片的权利，你将不得不使用此链接。
我故意让桌子边框可见。哎呀。无论我是否在Col 1中添加或减去文本，中间div都会延伸到封闭表的下方，显示相同数量的像素。多么奇怪。将＃col2 的高度降低到95％并不是一个解决方案，因为它只是一个波动的近似值。
如此近，但到目前为止。我已经尝试了所有我能想到的东西，从底边距： - 10px 到边界间距：20px 而不解决这个问题。任何人都可以提出答案，或者想出一些简单的Javascript来解决它一劳永逸的问题吗？非常感谢。
答案 0 :(得分：0)
高度不包括边距，因此您的100％实际上意味着100％+ 5px的上边距+ 5px底边距。除非我在第2列中取出你的桌子并制作导航display: inline-block，否则我无法让它像你的铬一样展示。我将padding-bottom: 10px添加到该表格单元格中，它对我来说很好看：
答案 1 :(得分：0)
