非静态页脚导航栏出现在移动设备屏幕底部的上方

Question

非静态页脚导航栏应显示在屏幕底部。

在移动设备上，当我的应用程序的某些页面加载页面时，页脚将显示在底部上方，因此页脚和页面底部之间会有空隙。有什么想法吗？

它在PC屏幕上正常工作。

/* Universal CSS: */

html {
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
}

body {
  padding-top: 60px;
  background-color: whitesmoke;
  margin-bottom: 51px;
}

/* CSS for the footer: */

.footer-navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.footer-container {
  // Keep footer navbar from collapsing on smaller screens
  display: block !important;
  .navbar-nav > li, .navbar-nav {
    float: left !important;
  }
  .navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
  }
  .navbar-right {
    float: right !important;
  }
}

<footer class="navbar footer-navbar navbar-inverse">
    <div class="container footer-container">
      <nav>
        <ul class="nav navbar-nav navbar-right">
          <li><%= link_to "Contact", "#" %></li>
          <li><%= link_to "Disclaimer", disclaimer_url %></li>
        </ul>
      </nav>
    </div>
</footer>

Answer 1

我不确定，但也许尝试将其更改为：

.footer-container {
display: block !important; 
}      
.footer-container.navbar-nav > li, .navbar-nav {
float: left !important;
}
.footer-container.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.footer-container.navbar-right {
float: right !important;
}