关于CSS：如何在100％的td内使div高度达到100％

How to get div height 100% inside td of 100%

这个问题似乎在stackoverflow上至少已经被问过至少十次了，但其中没有一个真正有答案。这一问题略有不同，因为该问题出现在Firefox中。

我的table高度为100％，而tr的高度为100％。我将td的边框设置为可以看到的内容。我看到td是预期的100％。我在td中放置了div，并将其设置为高度100％。在Chrome中是100％。在Firefox中不是100％。

我该如何解决？

例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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

<table>
<tr>
<td>

foo

</td>
</tr>
</table>

</body>
</html>

这是一个片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;
}

1
2
3
4
5
6
7
8
9
10
11

在Chrome中，您会看到

1
2
3
4
5
6
7
8
9

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中

1
2
3
4
5
6
7
8
9

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