Пользовательский интерфейс iOS скрывает нижнюю часть страницы. Как сделать всю страницу отзывчивой, а ее нижнюю часть всегда видимой, когда нижнее меню iOS скрыто и отображается?

Существует пример в jsfiddle. Класс «bottom_menu» должен отображаться внизу страницы. Текст класса «content» должен отображаться в центре div «bottom_menu». Но этот текст должен быть немного выше центра экрана телефона, потому что высота всего экрана телефона равна высоте блока "bottom_menu" + высота блока "bottom_menu".

Проблема в том, что когда я открываю эту страницу на iphone, родной интерфейс ios скрывает div «bottom_menu», пока я не прокручиваю вниз.

Мне нужно уменьшить высоту div «content», чтобы сделать «bottom_menu» видимым, когда отображается собственное нижнее меню ios.

Я попытался решить эту проблему, сделав положение «bottom_menu» position:fixed; и снизу: 0px; но в этом случае текст «константного» div отображается прямо в центре экрана телефона (а не в области content_height/2 — bottom_menu_height).

Как сделать это «bottom_menu» видимым, масштабируя div «content», когда собственное нижнее меню ios скрыто и показано?

HTML-код:

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

И CSS:

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

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

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