【发布时间】：2019-08-15 23:39:59
【问题描述】：
有一个example in jsfiddle。 “bottom_menu”类应显示在页面底部。 “content”类的文本应该显示在“bottom_menu”div的中心。但是这个文字应该比手机屏幕的中心略高，因为整个手机屏幕高度等于“bottom_menu”div高度+“bottom_menu”div高度。
问题是，当我在 iphone 上打开此页面时，ios 本机 ui 会隐藏“bottom_menu”div，直到我向下滚动。
我需要将“内容”div 降低一些高度，以在显示 ios 原生底部菜单时使“底部菜单”可见。
我试图通过设置“bottom_menu”位置来解决它：fixed;和底部：0px；但在这种情况下，“contant” div 的文本会显示在手机屏幕中心（而不是 content_height/2 - bottom_menu_height）。
当 ios 原生底部菜单隐藏和显示时，如何通过缩放“内容”div 来使这个“底部菜单”可见？
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;
}
【问题讨论】：
标签： javascript html ios css responsive-design