29

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

我的table身高是 100%，tr身高是 100%。我将边界设置为td我能看到的东西。我看到td100% 符合预期。我放了一个div并将td其设置为高度 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>

这是一个片段

    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：是的，我需要一张桌子。我正在显示表格数据。上面的示例被简化为单个单元格以简化调试。

4

3 回答 3

28

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

<td style="height: 100%">

jsFiddle

于 2013-08-28T12:46:03.583 回答
4

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

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

让它与Firefox一起使用。

于 2013-08-28T12:45:34.953 回答
0

CSS 通常需要一些技巧。

为什么不给所有的 div 添加一个大的填充和负边距，并隐藏 tds 溢出？

td {
    padding: 1rem 2rem;
    max-width: 6rem;
    overflow: hidden;
}
td > div {
    margin: -150px;
    padding: 150px;
}

这是一支笔：https ://codepen.io/migli/pen/ZEKXWGE

我没有在许多浏览器中进行测试，但我想它应该可以在任何地方工作？

于 2021-07-21T18:26:34.237 回答