如何让 div 占据没有固定 TD 高度的 html 表格单元格高度的 100%？答案

【问题标题】：How can I make a div take up 100% of the height of a html table cell that doesn't have a fixed TD height?如何让 div 占据没有固定 TD 高度的 html 表格单元格高度的 100%？
【发布时间】：2014-10-11 22:19:50
【问题描述】：

我有一个 html 表格，在一个单元格内我有一个 div

<td>
      <div class=content>some content</div>
</td>
<td>
      <div class=content>some content<br/>some content<br/>some content<br/></div>
</td>

某些单元格中的某些内容是多行，并且 div 具有背景颜色，因此我希望视图是统一的，因此我希望内容较少的 div 仍然具有相同的高度以覆盖整个 td。

我试过了

.content
{
    height:100%;
}

但这似乎并没有改变任何东西。

【问题讨论】：

有 been asked several times，但是不存在纯 CSS 解决方案。
为什么不对td单元格应用背景色？
@Mr_Green - 现在我在 div（不是 TD）周围有一个边框，所以看起来很有趣，但我同意我可以使用我的 css 并将其用作解决方案
@leora 将背景应用到 td 并使用 box-shadow inset 使看起来像 td 内的边框。

标签： html css height

【解决方案1】：

不是将背景应用到内容 div，而是应用到 td 单元格本身。

td {
    background-color: cornflowerblue;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    padding: 5px;
}

我还应用了 inset box-shadow，它可以替代在元素（在本例中为单元格）内应用边框，正如您在 cmets 中提到的那样，您的内容 div 也有边框。

Working Fiddle

【讨论】：

【解决方案2】：

高度是动态属性，根据内容应用。因此，您不能将其设置为百分比。但是如果父高度是固定的，那么孩子可以有百分比的高度属性。在这里，设置一些 td 的静态高度，以便您可以使用 div 高度百分比。

【讨论】：

问题是 TD 的高度会根据隐藏和显示之间的一些内容而动态变化，因此我想避免使用硬编码的 TD 高度。无论当前高度是多少，我基本上都希望 div 是 TD 高度的 100%。 .这可能吗？

【解决方案3】：

问题可能是您没有将Quotes 与您的类属性一起使用

这是我的代码

<table>
  <tr>
    <td>
      <div >some content</div>
</td>
<td>
      <div>some content<br/>some content<br/>some content<br/></div>
</td>
  </tr>
</table>

在这里查看JSBIN 希望对你有帮助

【讨论】：