这个基本问题已经在这个论坛上提出了很多次，但从来没有得到满意的回答，IMO。如何在表格单元格中拉伸 div 以使其填充单元格（垂直、水平或两者）？
等等等等
是的，我知道当我应该完全通过优雅的 CSS 创建表格时，我将被视为又一个思考在表格单元格中嵌入 div 的化石，正如 Rachel Andrew 和 Kevin Yank 在你所知道的关于 CSS 的一切都是错误的！（2008 年）。但是在尝试了他们和其他人写的东西之后，我并没有留下深刻的印象。他们“成功”的秘诀围绕着对显示器的依赖：table一系列属性来创建一个 CSS“表”，那么你最终得到了什么？一个 div（框），类似于表格、表格行或表格单元格。你不能把它的角弄圆（我需要在表格单元格中嵌入一个 div 的一个原因），没有跨行和列的规定（我需要），你不能将任何封闭的 div 拉伸到全高没有将它嵌入到另一个盒子或表格中，所以就这个问题而言，你又回到了原点。表格不能制作好的 div，反之亦然。
正如上述链接帖子之一中提到的那样，基本问题是表格单元格不会自愿将其高度（以像素为单位）包含在任何包含的 div 中，因此包括“height：100％”甚至“min-height：100％”没有其他解决方法的样式表将被忽略。单元格是单元格，而 div 是 div，两者永远不会相遇，除非你对 Javascript 很熟悉，而我不是。我只是想要一个非脚本、健壮的标记来使特定 div 的垂直高度与封闭表格单元格的垂直高度相匹配，这样如果相邻的单元格更高，我的 div 会随着整行的拉伸而拉伸，以保持 100%。
我不想使用position:absolute; 顶部：0；底部：0具有以像素为单位定义的单元格高度，因为行高将取决于最高单元格的高度。
好吧，我以为我实际上已经达到了圣杯，如下所示。这是一个包含 3 个 div 的单行表（实际上是 HTML5 中的导航）。我希望中间（即第二个）伸展到行的全高。（添加 - 因此，当文本添加到第 1 列或第 3 列或从第 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 链接
下面是它的外观（Windows 7 上的 Firefox 10）：
不幸的是，由于我还没有发布足够多的帖子来获得直接发布图片的权利，您将不得不使用此链接。
我故意使表格边框可见。哎呀。中间的 div 在封闭的表格下方延伸了相同数量的像素，看起来，无论我是从 Col 1 中添加还是减去文本。多么奇怪。将#col2的高度降低到 95% 并不是一个解决方案，因为它只是一个波动的近似值。
如此之近，却又如此之远。我已经尝试了我能想到的一切，从底部边距：-10px到边框间距：20px，但没有解决这个问题。谁能提出一个答案，或者想出一些简单的 Javascript 来一劳永逸地解决它？提前非常感谢。