CSS Min-Height Not Working on Mozilla Firefox

CSS min-height not working on mozilla firefox

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 min-height not working in firefox

You should use this:

min-height: 100vh;

For firefox you must set height for body and html

for firefox you must set height:'100%' for body and html elements as follows:

html, body {
    height: 100%;
}

.container {
    height: 100%;
    min-height: -moz-available; /* WebKit-based browsers will ignore this. */
    min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    min-height: fill-available;
}

this worked for me. I hope this can help you.

Firefox not supporting min-height

Please give height to body tag. You can check here.

body{  height:100vh;}div.inner-el{  width: 90%;  min-height: 65%;  background:#000;}

<html>  <body>    <div class="inner-el">    </div>  </body></html>

Height and min-height is not working in Firefox

To make the broken image visible in Firefox with the specified width and height, you can use the -moz-force-broken-image-icon property.

This Mozilla specific property will have no effect in other browsers.

li {  display: inline; float: left;}
li img {  width: 300px; height: 380px;  -moz-force-broken-image-icon: 1;}

<ul>  <li>    <div><img></div>  </li>  <li>    <div><img></div>  </li></ul>

Firefox not rendering min-height

add this to css

body, html {
 height: 100%
}

Why ?

because the percent is calculate based on the parent and right now the body and html don't have height

Check this fiddle

CSS Min-Height Not Working on Mozilla Firefox