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

CssResponsive Design

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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 - Css

You should use stretch instead of fill-available.

Solution 3 - Css

In my case, min-width did the trick:

min-width: -moz-available;
min-width: -webkit-fill-available;
min-width: fill-available;
Categories
Recommended Css Solutions
Recommended Responsive Design Solutions

Previous Solution:

How to iterate over consecutive chunks of Pandas dataframe efficiently

PythonPandasParallel ProcessingIpython

Next Solution:

Remove tab bar item text, show only image

IosSwiftUitabbaritem

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJulianView Question on Stackoverflow
Solution 1 - CssJames DonnellyView Answer on Stackoverflow
Solution 2 - CssvaleriocomoView Answer on Stackoverflow
Solution 3 - CssHamed NavabianView Answer on Stackoverflow