How to calculate bottom bar dimensions in browser on iPhone (make 100vh)?

Question

css

How to make an overlay exactly in the size of the visible screen in the browser on mobile devices?
Here is an example as by default, this yellow overlay has height: 100vhbut it is clearly visible that the bottom part is overlapped by this browser bar and the content is not centered. Those. the browser also considers this panel to be part of the viewport. How then to make the size with the deduction of this panel?

Answer 1

make a 1-2vh gap at the bottom somewhere, fill it with yellow, a slight deviation from the vertical center will not be noticeable.

Answer 2

I do so.

function is_mobile() {return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));};

function fix100vh() {
  var winHeight = $(window).height();
  if ( is_mobile() ) {
    $('.100vh-fix').css('min-height', winHeight);
  } 
}; fix100vh();