【问题标题】:Bootstrap 3 navbar not fixed to bottom when scrolling in ios在 ios 中滚动时,Bootstrap 3 导航栏未固定到底部
【发布时间】:2017-02-23 15:46:17
【问题描述】:

我正在使用 -viewport-overflow-scroll: touch;溢出:自动;能够在 ios 中使用动量滚动,但我遇到了引导导航栏的问题。当我在 ios 中滚动时,导航栏会停留在页面中间,直到我停止滚动,然后几秒钟后它又会粘在底部。有任何想法吗?导航栏位于带有滚动触摸的 div 内。 这是导航栏:

<nav class="navbar navbar-fixed-bottom footer">
    <div class="pull-left footer-text">
        <span>All rights reserved</span>
    </div>
    <div class="pull-right footer-icons">
        <img class="footer-icon" />
        <img class="footer-icon" />
    </div>
</nav>


.footer{
min-height:1em;
bottom:0;
background-color: #35AEEE;
right: 0;
left: 0;
color: white;
}

【问题讨论】:

    标签: html ios css twitter-bootstrap-3 navbar


    【解决方案1】:

    既然你有bottom: 0;,你可以添加position: absolute;属性让它贴在页面底部。

    .footer {
      min-height: 1em;
      bottom: 0;
      background-color: #35AEEE;
      right: 0;
      left: 0;
      color: white;
      position: absolute;
    }
    <nav class="navbar navbar-fixed-bottom footer">
      <div class="pull-left footer-text">
        <span>All rights reserved</span>
      </div>
      <div class="pull-right footer-icons">
        <img class="footer-icon" />
        <img class="footer-icon" />
      </div>
    </nav>

    【讨论】:

    • 是的,我已经尝试过了,但是当我添加 position: absolute;它只停留在页面第一次加载时页面底部的位置
    • 解决了。在 -viewport-overflow-scroll: touch 中不可能有一个固定的元素。看看这个remysharp.com/2012/05/24/…
    猜你喜欢
    • 1970-01-01
    • 2017-12-09
    • 1970-01-01
    • 2014-10-27
    • 1970-01-01
    • 1970-01-01
    • 2020-06-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多