The room -moz-available and -webkit-fill-available in the same width

Question

I want to make the width independent of the footer.

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

How to do it in CSS3?

I tried to do something like this:

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

This will not give the desired results.

Answer 1

CSS will skip declarations of styles that it does not understand. Mozilla browsers will not understand -webkit ads, and WebKit-based browsers will not understand -moz -prefixed ads.

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 beginning will be used by browsers that ignore the -moz and -webkit -prefixed declarations or do not support -moz-available or -webkit-fill-available .