100VH Viewport Safari Fix using Intrinsic Sizing

About the use of Using -webkit-fill-available

The idea behind -webkit-fill-available – at least at one point – was to allow for an element to intrinsically fit into a particular layout, i.e., fill the available space for that property.

At the moment intrinsic values like this aren’t fully supported by the CSSWG. However, the above problem is specifically in WebKit, which does support -webkit-fill-available.

The issue, and the fix

Wrong

The orange div, set to height:100vh, goes under the webkit's browser bottom bar.

The black footer, supposedly stuck to the bottom of the viewport, being masked by the browser bottom bar.

Okay

Using -webkit-fill-available, the viewport height is calculated as expected.

Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)

❮❯ code

body {
min-height: 100vh;
min-height: -webkit-fill-available;
}