CSS最小高度不工作在mozilla的火狐 [英] CSS min-height not working on mozilla firefox

问题描述

我创建了一个div标签，最小高度，并给出了背景颜色'red'。但在mozilla firefox的div的高度不增加时，内容跨越最小高度限制。 heres我的代码：

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

看起来div的高度必须设置为适合内容，但我不知道否则我可以这样做。如果我不使用高度然后背景颜色不能set.please告诉我如何适合的内容到div，以及背景颜色会是红色的。

（不知道我是否清楚地解释了。请问我是否想更多地了解这个问题。）

感谢。

已解决：

解决方案

更新您的CSS如下：

  div {min- height：50px; width：500px; background-color：red; overflow：hidden;} 
  

overflow：hidden; 添加

基本上，这是因为 float：left 在 .b 类。这就是它的工作原理。通常可以通过向父div添加 overflow：hidden 或通过添加style =clear：both;的元素来修复它。

您可以使用CSS clearfix关键字搜索更多关于它的信息。

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:

<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.)

-Thanks.

RESOLVED: thank you everybody for your kind answers.

解决方案

Update your css like this:

div{min-height:50px;width:500px;background-color:red;overflow:hidden;}

overflow:hidden; added

Basically, that happens because of float:left in .b class. That is how it works. Usually you can fix it by adding overflow:hidden to parent div or by adding an element with style="clear:both;" at the end of parent div.

You can search more info about it with 'CSS clearfix' keywords.

这篇关于CSS最小高度不工作在mozilla的火狐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！