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规范说我认为以下三件事很重要：

首先，重新：指定高度（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： 下面的演示:(注意你怎么看不到红色的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

虽然我喜欢克雷格的答案而且不会在这个答案中使用这个方法，但我确实对这个jsFiddle做了很多。

它依赖于黑客攻击：在桌面上设置height: 1px。它适用于Chrome，FF，IE11和Edge（我测试的所有内容），但Chrome在边缘情况下开始行为不端。看小提琴。以下是有趣的内容：

table {
    width: 100%;
    /* Whý does this make it work? */
    height: 1px;
}

td {
    border: 10px solid blue;
    height: 100%;
}

#container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 10px solid black;
}

对我来说，有太多的黑臭味。

Answer 4

您是否尝试过将css更改为：

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

似乎对我有用，边缘，firefox和chrome

Answer 5

只需设置div的行高;只要它的显示仍然是块级元素。不需要在div级别或其任何父级处进行相对或绝对定位或硬编码。适用于IE 8 +，Firefox和Chrome。

示例：

line-height: 50px;
// or
line-height: 2em;

Answer 6

这是一个jsfiddle：https://jsfiddle.net/55cc077/pvu5cmta/

CSS高度：100％仅在元素的父级具有明确定义的高度时才有效。这个jQuery在第一列中设置表格单元格高度。

<script type="text/javascript">
    $(function(){
    $('.myTable2 tr').each(function(){
    var H1 = $(this).height(); // Get the row height
    $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
    });
});
</script>

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

6 个答案: