在这个论坛中基本问题已经提出了很多次，但从未令人满意地回答，IMO。如何拉伸表格单元格中的div以便填充单元格（垂直，水平或两者）？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
等等
是的我意识到我将被视为另一个化石，用于在表格单元格中嵌入div时的思维方式，当我应该完全通过优雅的CSS创建表格时，我会用Rachel Andrew和Kevin Yank在你知道的关于CSS的一切都是错误的！（2008）。但在尝试了他们和他人写的内容之后，我并没有留下深刻的印象。他们“成功”的秘诀围绕着依靠显示器：表属性家族来创建一个CSS“表”，那么你最终会得到什么？表格（表格），表格（表格）或表格单元格你不能让它的角落变圆（我需要在表格单元格中嵌入div的一个原因），没有规定跨越行和列（我需要），你不能将任何封闭的div伸展到完整的高度将它嵌入另一个盒子或表格中，这样就可以回到原点。表格不会很好，，反之亦然。
作为上述链接帖子中提到的人之一，其基本问题是表格单元不自愿将其高度以像素为单位包含在任何包含的div中，因此包括“height：100％”或甚至“min-height：样式表中100％“，没有其他解决方法将被忽略。细胞是细胞，divs是div，除非你方便地使用Javascript，否则不会遇到这种情况。我只是想要一个非脚本，强大的标记，以使特定div的垂直高度与封闭表格单元匹配，这样，如果相邻单元格的高度更高，我的div会在整行拉伸时伸展，以保持100％。
我不想用position：absolute; top：0;底部：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
这里是它的外观（火狐10在Windows 7）：
不幸的是，由于我没有做足够的帖子尚未获得直接发布图片的权利，您必须完成此链接。
我故意让表格边框可见。哎呀。中间的div在封闭表下方延伸相同数量的像素，看起来，无论我是从第1列中添加还是减去文本。多么奇怪。将＃col2的高度降低到95％并不是一个解决方案，因为它只是一个波动的近似值。
这么近以至目前为止。我试过了我能想到的所有东西，从下边距：-10px到border-spacing：20px没有解决这个问题。任何人都可以提出一个答案，或者可能想出一点简单的Javascript来解决它一劳永逸吗？非常感谢提前。
我没有看到他们在[这个小提琴]中伸展着（http://jsfiddle.net/jgoemat/nS2ar/），有什么我失踪了吗？ –
（我还在注意到你的回复之前添加了一个小提琴（看我的帖子），它们看起来都是一样的。） – maximus
（我注意到你的回复之前还加了一个小提琴（看我的帖子），它们看起来都是一样的。）目的的代码是让中间（粉红色）列伸展以匹配两个灰色长度中较长的一个，在这种情况下是左边的一个。例如，如果您删除了Col1中的最后一个段落，则这会缩短列，而中间的一个也会缩短，但匹配永远不会精确（始终以Col2的相同数量重叠）。我想调整Col2，使其长度（弯曲的角落和全部）与Col1的长度完全一致。 – maximus