如何让div填充整个表格单元格？
我试图用div元素填充表格的中心单元格。 出于说明问题的目的，div的样式为红色背景。 它似乎在Chrome中工作，但不是IE。 在下面的小提琴中，IE将div的高度设置为包含其内容所需的最小高度。 在用不同的CSS设置修补这个问题时，我设法让IE解释“height：100％”; 作为“浏览器窗口的高度”。 但是，正如问题所述，我希望IE将其解释为td单元的高度。 有任何想法吗？
http://jsfiddle.net/UBk79/
CSS：
*{
padding: 0px;
margin: 0px;
}
html, body{
height: 100%;
}
#container{
height:100%;
width: 100%;
border-collapse:collapse;
}
#centerCell{
border: 1px solid black;
}
#main{
height: 100%;
background-color: red;
}
HTML：
<table id="container">
<tr id="topRow" height="1px">
<td id="headerCell" colspan="3">
TOP
</td>
</tr>
<tr id="middleRow">
<td id="leftCell" width="1px">
LEFT
</td>
<td id="centerCell">
<div id="main">CENTER</div>
</td>
<td id="rightCell" width="1px">
RIGHT
</td>
</tr>
<tr id="bottomRow" height="1px">
<td id="footerCell" colspan="3">
BOTTOM
</td>
</tr>
</table>
你有没有尝试改变CSS：
#centerCell{
border: 1px solid black;
height:100%;
}
似乎在边缘，firefox和chrome上为我工作
我对此做了一些更多的研究，并收集了一些可能适用于其他人试图解决类似问题的信息。 CSS规范说明了我认为重要的以下三件事：
首先，re：以百分比的形式指定高度（div的高度）：
百分比是根据生成的包含框的块的高度来计算的。 如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素没有被绝对定位，则该值计算为'auto'。
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
...“自动”高度不会填充单元格，除非内容比单元格的最小高度更高。 但是，如果我们试图明确设置包含单元格或行的高度，那么我们会遇到以下问题：
当使用百分比值指定高度时，CSS 2.1不定义如何计算表格单元格和表格行的高度。
http://www.w3.org/TR/CSS21/tables.html#height-layout
由于该规范没有对其进行定义，因此我认为Chrome和IE选择以不同的方式进行计算并不奇怪。
或者，（如xec间接指出的）尝试使用相对定位有以下规格问题：
table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素上'position：relative'的影响未定义。
www.w3.org/TR/CSS21/visuren.html#propdef-position
所以我认为可能没有一种纯粹的CSS方式来解决人们可以合理预期在大多数浏览器上工作的问题。
起初，我想，“哇，CSS规格相当粗俗和不完整，因为这些东西都是未定义的。” 然而，当我想到更多的时候，我意识到为这些问题确定规格将比起初看起来复杂得多。 毕竟，行/单元高度是作为其内容高度的函数计算的，我想使我的内容高度成为行/单元高度的函数。 即使我有一个明确的终止算法，我希望它能够在我的特定情况下工作，但不清楚该算法是否会轻易推广到规范需要覆盖的所有其他情况，而不会陷入无限循环。
只需将表格单元格设置为： position:relative并将div分配给：
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
编辑2017： DEMO以下:(注意你怎么看不到红色td）
#expandingDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: yellow;
}<table style="width: 120px">
<tr>
<td style="background: blue">blue td</td>
<td style="background: green">green td</td>
</tr>
<tr>
<td style="background: red; position: relative">
<div id='expandingDiv'> yellow div </div>
</td>
<td style="background: orange">
Some longer text which makes the bottom two tds expand dynamically.
</td>
</tr>
</table>