如何让 div 填充整个表格单元格？答案

【问题标题】：How do I make a div fill an entire table cell?如何让 div 填充整个表格单元格？
【发布时间】：2013-11-10 03:50:04
【问题描述】：

我正在尝试用 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>

【问题讨论】：

您是否使用表格来布置网页？
是的。昨天我花了一整天的时间试图发明/找到实现上述目标的 CSS 解决方案。我发现的最接近的是另一个 StackOverflow 问题的答案：stackoverflow.com/a/19110204/2897709 如您所见，它使用 CSS 表格显示属性，但是当您尝试让一些“单元格”跨越多个“列”时它会崩溃，因为显然没有与 colspan 属性类似的 CSS。
我发现或想到的其他 CSS 解决方案（a）需要指定页脚的高度，或者（b）当内容较短时不要将页脚保持在窗口底部高于窗口的高度，或 (c) 当内容高于窗口的高度时，页脚与内容重叠，或 (d) 要求浏览器渲染部分或全部 DOM，然后运行一些 javascript，然后重新渲染页面。表格布局是我发现的第一个没有任何这些问题的解决方案，至少在 Chrome 中是这样。不过，我似乎无法让它在 IE 中运行....
2018 年更新：看起来它现在可以在 Chrome、Firefox、IE11 和 Edge 中运行。（Firefox 需要 @cloudpta 建议的 height: 100%; 添加。）我猜在某些时候 IE 更改了它的算法以匹配其他算法。我还没有测试过旧版本的 IE，以确定更改发生的确切时间。

标签： html css internet-explorer

【解决方案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 规范非常粗制滥造而且不完整，因为没有定义所有这些东西。”然而，当我想得更多时，我意识到为这些问题定义规范比最初看起来要复杂得多。毕竟，行/单元格高度是根据其内容的高度计算的，我想让我的内容的高度成为行/单元格高度的函数。即使我有一个定义明确的终止算法，我希望它在我的特定情况下如何工作，但不清楚该算法是否可以轻松推广到规范需要涵盖的所有其他情况，而不会陷入无限循环。

【讨论】：

+1 分享您的结论。希望未来 CSS 会在布局方面做得更好，添加诸如 flexbox 和/或 CSS 网格之类的功能。
我很难看到将元素的高度设置为其父级高度的百分比（显式设置与否）会导致无限循环？有非常明确的方法可以做到这一点，而且这不是一个很深奥的知识。唯一令人费解的是为什么 CSS 规范不支持此功能。
如果单元格高度是内容高度的函数，则不能使内容高度成为单元格高度的函数。这是循环逻辑。可以为规范增加一些额外的复杂性来处理这些情况，但是正如您所说，有多种方法可以实现它，而且尚不清楚哪种方式最好，甚至没有一种最好的方法来实现它发生。它变得混乱。无论如何，我只是在猜测为什么它没有被定义。我不是 CSS 规范委员会的成员。

【解决方案2】：

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

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

2017 年编辑： 下面的演示：

请注意您是如何看不到红色 td 的，因为黄色 div 完全覆盖了它...

#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>

【讨论】：

如果没有额外的标记，这是行不通的。阅读更多css-tricks.com/absolutely-position-element-within-a-table-cell
我已经阅读了该页面。尽管答案已被接受，但它并不正确，正如 Jason 在他对已接受解决方案的第二条评论中指出的那样。缺乏适当的背景颜色是建议的解决方案不起作用的证据。不过，感谢您的尝试。
用一个例子更新了答案

【解决方案3】：

虽然我喜欢 Craig 的回答，并且我自己不会在这个回答中使用这种方法，但我确实对这个 jsFiddle 做得很远。

然而，它依赖于 hack：在桌子上设置 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;
}

对我来说太难闻了。

【讨论】：

我认为这是通过使表格（及其组件）具有明确定义的高度来实现的，这允许 100% 相对于它。

【解决方案4】：

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

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

似乎在 edge、firefox 和 chrome 上对我有用

【讨论】：

2018 年更新：看起来它现在可以在 Chrome、Firefox、IE11 和 Edge 中运行。（Firefox 需要 @cloudpta 建议的 height: 100%; 添加。）我猜在某些时候 IE 更改了它的算法以匹配其他算法。我还没有测试过旧版本的 IE，以确定更改发生的确切时间。

【解决方案5】：

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

例子：

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

【讨论】：

【解决方案6】：

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

CSS height: 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>

【讨论】：