How to fix height on iphone?

Question

iPhone

the problem is the following. The iphone in safari has a menu at the bottom, when it is hidden, the background is visible instead of it, and the block is not scaled, which should stretch to its full height. Is there an event that can be caught and resized? Somewhere I already met a similar problem on a toaster, I can not find it.
It's especially hemorrhagic to debug when there is no iphone, but I won't buy it for reasons of principle.

Answer 1

window.innerHeight checks this garbage, you can put a watcher on it. I implemented it in Angular, so I won’t tell you the code, but it works for me

Answer 2

You need to hang up a small script on window resize events. The code goes something like this: On each window resize event, take the height of the document and assign that value to the height of the block.
A working example is here .
js code itself

window.addEventListener('resize', function() {
    var container = document.getElementById('block');
    container.style.height = window.innerHeight + 'px';
  }); // Listen for resize