Question

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

我的身高table为100％，身高tr为100％。我将td的边界设置为我能看到的东西。我看到td是100％的预期。我在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。＃=黑色div应该是100％。 r =红色内部div也应该是100％（显然在任何一种情况下）。这是黑色的错误。

在这种情况下，我需要修复哪些CSS才能使Firefox像Chrome一样？

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

Answer 1

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

<td style="height: 100%">

jsFiddle

Answer 2

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

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

用它来使用firefox。

Answer 3

CSS 通常需要一些技巧。

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

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

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

我没有在很多浏览器中测试过，但我想它应该适用于任何地方？

如何在100％的td内获得div高度100％

3 个答案: