【问题标题】:Div moves down to the bottom of the page and not button of screen height in iOSDiv 向下移动到页面底部,而不是 iOS 中的屏幕高度按钮
【发布时间】:2017-05-28 21:32:36
【问题描述】:

在我的网站上,我有一个菜单按钮,但问题是当在 iPhone 和 iPad 中查看该网站时,该按钮最终位于页面底部,而不是位于屏幕底部。因此,在向下滚动到页面底部之前,您看不到该按钮。

我了解到 iOS 存在一些问题,所以我想这与此有关。 bottom: 0; 将按钮移动到页面底部而不是屏幕底部。但这仅在您按下按钮后才会发生(并且菜单从左侧切换出来)

我想要的只是按钮无论如何都应该留在屏幕的按钮上。而且我猜在这种情况下它不会因为菜单,因为它在点击它之前就可以工作。

我的 CSS:

.nav-box {  /* this is the button */
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    background: #b26f7e;
    opacity: 0.8;
    padding: 4px 13px 4px 12px;
    font-size: 28px;
    color: #fafafa;
    cursor: pointer;
}

.pushmenu { /*this is the nav*/
    background: #72ce9b;
    font-family: Arial, Helvetics, sans-serif;
    width: 240px;
    z-index: 998;
    position: fixed;
    top: 0;
    bottom: 0;
}
<nav class="pushmenu pushmenu-left text-center">
    <a class="navbar-brand" href="/sv/">
        <img src="" width="200" style="margin-top: 20px;" />
    </a>
    <ul class="text-left">

<li></li>



    </ul>
</nav>


<div class="nav-box">
    <i class="fa fa-bars" aria-hidden="true"></i>
    <i class="fa fa-times" aria-hidden="true" style="display: none;"></i>
</div>

【问题讨论】:

    标签: ios css position height


    【解决方案1】:

    您是否对按钮.nav-box 显示在页面底部的视线之外有疑问?如果是这样,剩下的大部分问题可能会分散注意力。

    我看到的第一件事是.nav-boxtop: 0 而不是bottom:0。你的意思是它在顶部还是底部?

    【讨论】:

    • 我把它移到手机上,会改变它
    • 是的,这是我的问题。但我认为它与菜单有关,因为它在您按下导航框之前一直有效,导航框会打开菜单,这就是为什么我在这里有该代码
    • 可能值得编辑您的问题以尽可能只关注手头的问题。您可以从解释中删除的任何内容以及重现问题所必需的代码都应删除。此外,包含相关的 HTML 也会有所帮助。
    • 我现在尽我所能编辑了这个问题。而且我不认为 html 在这种情况下是相关的,因为它在所有其他浏览器和设备中都可以正常工作,问题是 iOS 有另一种处理 viewheight 或其他东西的方式。仅适用于 iPhone 和 iPad,我需要一个解决方案/解决方法
    • 我只提到了 HTML,因为我试图重构您遇到的问题,而且我不得不猜测您使用的 HTML 结构是什么。
    猜你喜欢
    • 1970-01-01
    • 2013-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-30
    • 2018-10-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多