14

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

6 回答 6

24

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

于 2013-10-31T09:55:40.647 回答
9

只需将表格单元格设置为：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>

于 2013-10-30T14:10:08.710 回答
2

虽然我喜欢 Craig 的回答，并且我自己不会在这个回答中使用这种方法，但我确实在这个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;
}

对我来说太难闻了。

于 2016-12-14T23:20:25.403 回答
1

您是否尝试将 css 更改为：

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

似乎在边缘、Firefox 和 chrome 上对我有用

于 2018-05-16T14:38:17.593 回答
-1

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

例子：

line-height: 50px;
// or
line-height: 2em;
于 2014-09-03T07:04:23.280 回答
-1

这是一个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>
于 2017-02-01T19:01:59.597 回答