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

This question seems to have been asked at least 10 other times here on * but not one of them actually has an answer. This one is slightly different in that the issue appears in Firefox.

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

I have a table height 100%, with a tr height 100%. I set the border of the td to something I can see. I see that the td is 100% as expected. I put a div in that td and set it to height 100%. It's 100% in Chrome. It's NOT 100% in Firefox.

我的桌子高度为100％，tr高度为100％。我将td的边界设置为我能看到的东西。我看到td是预期的100％。我在那个td中加了一个div并将它设置为100％的高度。这是Chrome中的100％。它不是100％的Firefox。

How do I fix this?

我该如何解决？

Example

例

<!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>

Here's a snippet

这是一个片段

    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>

In Chrome you'll see

在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

Whereas in Firefox it's

而在Firefox中它是

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

where b = blue td. # = black div that should be 100%. r = red inner div that should also be 100% (and apparently is in either case). It's the black one that's wrong.

其中b =蓝色td。＃=黑色div应该是100％。 r =红色内部div也应该是100％（显然在任何一种情况下）。这是黑色的错误。

What CSS do I have to fix to get Firefox to behave like Chrome in this case?

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

PS: Yes I need a table. I'm displaying tabular data. The example above is simplified to a single cell to simplify debugging.

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

2 个解决方案

#1

You need to set the height of the td to 100% too:

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

<td style="height: 100%">

jsFiddle

的jsfiddle

#2

I think it's because firefox need all elements to have 100% height in the css, including your TD.

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

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

Got it working with firefox with this.

用它与firefox一起工作。

#1