'Putting -moz-available and -webkit-fill-available in one width (CSS property)

I want to make the width of the footer browser-independent.

For Mozilla I want to use the value of -moz-available, and when a user uses Opera, then CSS should get the values from -webkit-fill-available.

How can I do this in CSS 3?

I tried to do something like this:

width: -moz-available, -webkit-fill-available;

This won't give the desired results.

cssresponsive-design


Solution 1:[1]

CSS will skip over style declarations it doesn't understand. Mozilla-based browsers will not understand -webkit-prefixed declarations, and WebKit-based browsers will not understand -moz-prefixed declarations.

Because of this, we can simply declare width twice:

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

The width: 100% declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available.

Solution 2:[2]

You should use stretch instead of fill-available.

Solution 3:[3]

In my case, min-width did the trick:

min-width: -moz-available;
min-width: -webkit-fill-available;
min-width: fill-available;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 valeriocomo
Solution 3 Hamed Navabian

Related Questions