CSS min-height not working on mozilla firefox

问题:

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:

     
asdsad
         
asdsad
         
asdsad
         
asdsad
         
asdsad
         
asdsad
         
asdsad
     
 

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.

回答1:

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.

回答2:

On Firefox, min-height is not interpreted on display: table(-*); properties, juste try to use height: 50px; instead as it is interpreted as minimum height on tables.

Source

回答3:

The min-height property is supported in all major browsers.

But this property is not working with html tables on firefox.

回答4:

Add overflow: hidden; to ul.

The problem is that your LIs are floated which causes the parent to not know the height of it's contents.

回答5:

When an element's display is set to table, firefox will ignore the min-height property without actually setting the height.

By switching the element to display:block, firefox then respected the min-height property.

回答6:

I have added following and it's worked:

body {   height:100%; } 

回答7:

You'll have to clear the floating of the nested li tags like this:

ul:after {     content: ".";     display: block;     clear: both;     visibility: hidden;     line-height: 0;     height: 0; } 

回答8:

instead of min-height:50px; just add padding: 25px 0;

文章来源: CSS min-height not working on mozilla firefox