iOS ui hides the bottom of the page. How do I make the whole page responsive and its bottom always visible when iOS bottom menu is hidden and shown?

Question

There is an example in jsfiddle . The "bottom_menu" class should be displayed at the bottom of the page. The text of the "content" class should be displayed at the center of the "bottom_menu" div. But this text should be slightly higher then the center of the phone screen, because the whole phone screen height equals "bottom_menu" div height + "bottom_menu" div height.

The problem is that when I open this page on iphone, ios native ui hides "bottom_menu" div until I do scroll down.

I need to make the "content" div some height reducing to make the "bottom_menu" visible when ios native bototm menu is shown.

I tried to solve it by making the "bottom_menu" position:fixed; and bottop: 0px; but in this case the text of "contant" div displays right at the phone screen center (not at the content_height/2 - bottom_menu_height).

How do I make this "bottom_menu" alveys visible by scaling the "content" div when ios native bottom menu hidden and shown?

The html is:

<div class="wrapper">
   <p>It's scrolleble content</p>
   <div class="bottom_menu">Content on the bottom of the page</div> 
</div>

And the CSS is:

.wrapper {
  background: green;
  height: 200vh;
}

.bottom_menu {
  background: rebeccapurple;
  height: 44px;
  position: fixed;
  bottom: 0px;
}

p {
  background: red;
  height: 100vh;
}

Answer 1

One approach might be detect browser and change your bottom property in .bottom_menu, take a look at these links.

How to detect Safari, Chrome, IE, Firefox and Opera browser?

How to detect my browser version and operating system using JavaScript?