CSS min-height 不适用于 mozilla firefox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14053206/
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 min-height not working on mozilla firefox
提问by user1844626
I created a div tag with min-height and gave background color 'red'. but on mozilla firefox the height of the div not increasing when the content crosses min-height limit. heres my code:
我用 min-height 创建了一个 div 标签，并给了背景颜色“红色”。但是在 mozilla firefox 上，当内容超过最小高度限制时，div 的高度不会增加。继承人我的代码：
<style type="text/css"><!--
ul {
display:block;
padding:0px;
width:500px;
}
.b {
width:250px;
float:left;
display:block;
}
div {
min-height:50px;
width:500px;
background-color:red;
}
--></style>
<div>
<ul>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
</ul>
</div>
its seeming the div height would have to be set to fit contents,but I don't know how else can I do that.if I don't use height then background-color can't be set.please tell me how can I fit the contents to the div as well as the background color would be red.
(Don't know if I explained it clearly.so please ask me if you want to know more about the question.)
它似乎必须将 div 高度设置为适合内容，但我不知道我还能怎么做。如果我不使用高度，则无法设置背景颜色。请告诉我我该怎么做使内容适合 div 以及背景颜色为红色。
（不知道我解释的清楚没有。所以如果你想了解更多关于这个问题，请问我。）
-Thanks.
-谢谢。
RESOLVED:thank you everybody for your kind answers.
已解决：谢谢大家的热心回答。
采纳答案by Viktor S.
Update your css like this:
像这样更新你的css：
div{min-height:50px;width:500px;background-color:red;overflow:hidden;}
overflow:hidden;added
overflow:hidden;添加
Basically, that happens because of float:leftin .bclass. That is how it works. Usually you can fix it by adding overflow:hiddento parent div or by adding an element with style="clear:both;" at the end of parent div.
基本上，这是因为 float:left在.b课堂上。这就是它的工作原理。通常你可以通过添加overflow:hidden到父 div 或添加一个 style="clear:both;" 的元素来修复它 在父 div 的末尾。
You can search more info about it with 'CSS clearfix' keywords.
您可以使用“CSS clearfix”关键字搜索有关它的更多信息。
回答by Clément Fiorio
回答by SwR
The min-height property is supported in all major browsers.
所有主要浏览器都支持 min-height 属性。
But this property is not working with html tables on firefox.
但是此属性不适用于 Firefox 上的 html 表。
回答by skribbz14
When an element's display is set to table, firefox will ignore the min-height property without actually setting the height.
当元素的显示设置为 table 时，firefox 将忽略 min-height 属性而不实际设置高度。
By switching the element to display:block, firefox then respected the min-height property.
通过将元素切换到 display:block，firefox 尊重 min-height 属性。
回答by Hardik Patel
I have added following and it's worked:
我添加了以下内容并且它有效：
body {
height:100%;
}
回答by Jan Han?i?
Add overflow: hidden;to ul.
添加overflow: hidden;到ul.
The problem is that your LIs are floated which causes the parent to not know the height of it's contents.
问题是您的LIs 是浮动的，这导致父级不知道其内容的高度。
回答by axel.michel
You'll have to clear the floating of the nested li tags like this:
您必须像这样清除嵌套 li 标签的浮动：
ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
回答by Fadi
instead of min-height:50px; just add padding: 25px 0;
而不是 min-height:50px; 只需添加填充：25px 0;
