Is there something equivalent to "-webkit-fill-available" that works in all browsers?

I’m having a lot of problems with “width” in different resolutions, in “position:absolute”, is there an equivalent of “-webkit-fill-available” that works in all browsers? Serves some display or etc, thank you in advance!

I’m not sure I understand the question, but there are a number of ways to fill.

  • width: 100% - not ideal because then you lose access to margins.
  • aspect-ratio - limited to images/videos but can be useful.
  • display: grid or display:flex probably the easiest to implement. Which you choose to use depends on how the items are structured.

I believe there is -moz-available for Firefox and I believe chrome works without a prefix but have not tested either.

However it may help to see an example of where you need this as there is usually no need for most straight forward layouts.

Adding, difficulties occur in “position:absolute;”.

I don’t usually use widths in position absolute but describe the area with left and right co ordinates instead.

It does of course depend on context so it’s not always straight forward.

1 Like

That does add a wrinkle, and one I prefer to avoid unless I ABSOLUTELY have to…absolute positioning makes my head hurt.

Paul’s approach is what I use (I’m assuming I learned it from him) where using the left/right positioning coordinates instead of using width.

1 Like