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 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.
Using -webkit-fill-available, the viewport height is calculated as expected.