0

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;
}

enter image description here

BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16
mr_blond
  • 1,586
  • 2
  • 20
  • 52

1 Answers1

0

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?

Jose Rojas
  • 3,490
  • 3
  • 26
  • 40
  • In case if I detected browser and knew it's Safari, what changes I have to apply to .bottom_menu? I can't detect if bottom menu ui is shown or hidden in Safari. – mr_blond Aug 15 '19 at 14:42
  • @mr_blond if you add resize listener to your window, this is fired when ui toolbar is shown? – Jose Rojas Aug 15 '19 at 15:10