CSS 如何在 100% 的 td 内获得 100% 的 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18488148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get div height 100% inside td of 100%
提问by gman
This question seems to have been asked at least 10 other times here on stackoverflow but not one of them actually has an answer. This one is slightly different in that the issue appears in Firefox.
这个问题似乎在 stackoverflow 上至少被问过 10 次，但实际上没有一个人有答案。这个问题略有不同，因为该问题出现在 Firefox 中。
I have a tableheight 100%, with a trheight 100%. I set the border of the tdto something I can see. I see that the tdis 100% as expected. I put a divin that tdand set it to height 100%. It's 100% in Chrome. It's NOT 100% in Firefox.
我的table身高是 100%，tr身高是 100%。我将 的边框设置为td我可以看到的东西。我看到td100% 符合预期。我把div在td并将其设置为高100％。在 Chrome 中是 100%。在 Firefox 中不是 100%。
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：是的，我需要一张桌子。我正在显示表格数据。上面的示例被简化为单个单元格以简化调试。
回答by Tomzan
回答by Razz
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 一起工作。
