如何将div填充整个表格单元格？

Question

我正在尝试用div元素填充表格的中心单元格.为了说明问题,div的样式为红色背景.它似乎适用于Chrome,但不适用于IE.在下面的小提琴中,IE将div的高度设置为包含其内容所需的最小高度.通过不同的CSS设置修补这个问题,我设法让IE解释"高度: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>

Answer 1

我对此做了一些更多的研究,收集了一些可能对其他试图解决类似问题的人有用的信息.CSS规范说我认为以下三件事很重要:

首先,re:指定高度(div)的百分比:

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

...'auto'的高度不会填充单元格,除非内容高于单元格的最小高度.但是如果我们尝试显式设置包含单元格或行的高度,那么我们会遇到以下问题:

CSS 2.1没有定义在使用百分比值指定高度时如何计算表格单元格和表格行的高度.

http://www.w3.org/TR/CSS21/tables.html#height-layout

由于规范没有定义它,我想Chrome和IE选择以不同方式计算它并不太令人惊讶.

或者,(正如xec间接指出的)尝试使用相对定位具有以下规范问题:

'position:relative'对table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素的影响未定义.

www.w3.org/TR/CSS21/visuren.html#propdef-position

所以我得出结论,可能没有一种纯CSS方式来解决人们可以合理地期望在大多数浏览器上工作的问题.

起初,我想,"哇,CSS规范是非常粗俗和不完整的,因为所有这些东西都未定义." 然而,正如我想的那样,我意识到定义这些问题的规范会比最初看起来要复杂得多.毕竟,行/单元格高度是根据其内容的高度计算的,我希望将内容的高度作为行/单元格高度的函数.即使我有一个明确定义的终止算法,我希望它在我的特定情况下工作,但是不清楚该算法是否可以很容易地推广到规范需要覆盖的所有其他情况而不会进入无限循环.

Answer 2

只需将表格单元格设置为:position:relative并将div设置为:

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

编辑2017: DEMO BELOW :(注意你怎么看不到红色td)

#expandingDiv {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: yellow;
}

<table style="width: 120px">
  <tr>
    <td style="background: blue">blue&nbsp;td</td>
    <td style="background: green">green&nbsp;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>

Answer 3

您是否尝试将 css 更改为：

#centerCell{
    border: 1px solid black;
    height:100%;
}

似乎在 Edge、Firefox 和 Chrome 上对我有用