Html Firefox 中的 CSS 高度 100% 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20956295/
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
CSS height 100% in firefox not working
提问by pdiddy
I have the following HTML and CSS that behaves totally different in Firefox and Chrome.
我有以下 HTML 和 CSS，它们在 Firefox 和 Chrome 中的行为完全不同。
.container {
width: 200px;
height: 50px;
border: 1px solid black;
display: inline-table;
}
.content {
background-color: red;
width: 30%;
height: 100%;
}<div class="container">
<div class="content"></div>
</div>
<div class="container">
<div class="content"></div>
</div>In Chrome it displays correctly but not in Firefox.
在 Chrome 中它显示正确，但在 Firefox 中不显示。
Chrome:
铬合金：
Firefox:
火狐：
By inspecting the content div in Firefox, the height is 0.
通过在 Firefox 中检查 content div，高度为 0。
Why does it work in Chrome and Safari, but not in Firefox?
I notice that removing the display: inline-tablewill work but the container div will be stacked instead of inline.
为什么它在 Chrome 和 Safari 中有效，而在 Firefox 中无效？我注意到删除display: inline-table将起作用，但容器 div 将被堆叠而不是内联。
采纳答案by kmoe
Try changing display: inline-table;to display: inline-block;.
尝试更改display: inline-table;为display: inline-block;.
回答by CRABOLO
I could only get it to work when I used
我只能在使用时让它工作
.content {
display: inline-table;
}
回答by Ganesh Kandu
try this its working
试试这个它的工作
position: absolute;
top: 0px;
bottom: 0px;
width: 50px;
回答by RacerNerd
The element does not display properly because FireFox is locking it to the size of the inner content, but I'm sure you already gathered that.
该元素无法正确显示，因为 FireFox 将其锁定到内部内容的大小，但我相信您已经收集到了这一点。
I noticed that the container height that holds the inner is fixed to 50. If you have a fixed height for the outer container, you could match the height for the inner element.
我注意到容纳内部的容器高度固定为 50。如果外部容器的高度固定，则可以匹配内部元素的高度。
I know this isn't the dynamic solution based on percent, but it's a work around.
我知道这不是基于百分比的动态解决方案，但它是一种解决方法。
