-moz-available height not working in firefox

Question

i use fill available in chrome and it's working perfectly but not in firefox. here's the fiddle : fiddle why does it not working? please help.

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

Chaise

Firefox sees height: -moz-fill-available; as invalid property. It only understands -moz-available. It's not recommended to use experimental CSS property as the functionality will change from time to time. Why don't use you traditional html, body { height: 100%; } trick? – Width

i change it to -moz-available but it's still not working. the traditional way is working perfectly – Chaise

Answer 1

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.

Emergency

I had to use min-height: -moz-available and attach to the container (not a class), height: 100% – Retrograde

Also note, this has to be %. vh does not work here. – Carlsbad