如何在 100% 的 td 内获得 100% 的 div 高度答案

【问题标题】：How to get div height 100% inside td of 100%如何在 100% 的 td 内获得 100% 的 div 高度
【发布时间】：2013-08-31 12:59:23
【问题描述】：

这个问题似乎在 stackoverflow 上至少被问过 10 次，但实际上没有一个问题有答案。这一点略有不同，因为该问题出现在 Firefox 中。

我有一个 table 高度 100% 和一个 tr 高度 100%。我将td 的边框设置为我能看到的东西。我看到td 达到预期的 100%。我在那个td 中放了一个div 并将其设置为100% 的高度。它在 Chrome 中是 100%。在 Firefox 中不是 100%。

我该如何解决这个问题？

例子

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.full {
    width: 100%;
    height: 100%;
    border: 10px solid red;
}
#content {
    width: 100%;
    height: 100%;
}

#content>table {
    width: 100%;
    height: 100%;
}
#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
}
#container {
    width: 100%;
    height: 100%;
    border: 10px solid black;
}
</style>
</head>
<body>
<div id="content">
  <table>
    <tr>
      <td>
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

这是一个sn-p

    body, html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .full {
        width: 100%;
        height: 100%;
        border: 10px solid red;
    }
    #content {
        width: 100%;
        height: 100%;
    }

    #content>table {
        width: 100%;
        height: 100%;
    }
    #content>table>tbody>tr>td {
        border: 10px solid blue;
    }
    #container {
        width: 100%;
        height: 100%;
        border: 10px solid black;
    }

    <div id="content">
      <table>
        <tr>
          <td>
            <div id="container">
              <div class="full">
                foo
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>

在 Chrome 中你会看到

 bbbbbbbbbbb
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#r     r#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 bbbbbbbbbbb

而在 Firefox 中是

 bbbbbbbbbbb
 b         b
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 b         b
 bbbbbbbbbbb

其中 b = 蓝色 td。 # = 应该是 100% 的黑色 div。 r = 红色内部 div 也应该是 100%（显然在任何一种情况下都是如此）。是黑色的那个是错的。

在这种情况下，我必须修复哪些 CSS 才能让 Firefox 表现得像 Chrome？

PS：是的，我需要一张桌子。我正在显示表格数据。上面的示例被简化为单个单元格以简化调试。

【问题讨论】：

您缺少</tr>
修复了缺少的</tr>，但这并不能解决问题
确实如此。我不知道是否会有一个完美修复那个。关于它有一个有趣的thread。
IE11 和 Firefox 有同样的问题，结果看起来一样。下面的解决方案也适用于 IE11。

标签： css

【解决方案1】：

我认为这是因为 firefox 需要所有元素在 css 中具有 100% 的高度，包括您的 TD。

#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
    height: 100%;
}

用这个和firefox一起工作。

【讨论】：

【解决方案2】：

您还需要将 td 的高度设置为 100%：

<td style="height: 100%">

jsFiddle

【讨论】：

很有趣，即使 td 通过查看正在为其绘制的边框显然已经处于 100% 高度:-(
我没有在上设置高度，它适用于 chrome 和 firefox。
我不知道 Chrome 是否改变了他的算法，但这似乎在 2019 年不再是一个好的解决方案。在我们拥有的一个项目中，它确实在某些单元格中随机工作；有些没有。格式不正确的，如果我进入 F12，单击/取消单击 div 的 CSS 高度：100%，之后它会工作，直到下一次刷新。奇怪的问题。
2019 年在 Chrome 中唯一对我有用的是这个解决方案：stackoverflow.com/a/28486954/136590 基本上，你设置了 <tr style="height: 100%;"> 和 <td style="height: 0;">。我不知道为什么会这样，但确实有效:(
如果您将单元格和行都设置为 100% 并且仅针对 Firefox，则它可以工作。另一方面，Chrome 需要单元格具有固定的高度，甚至为零。因此完整的解决方案是：th, td { height: 0; } @-moz-document url-prefix() { tr, th, td { height: 100%; } }（按顺序使用它们）