Нестатический нижний колонтитул появляется на мобильных устройствах над нижней частью экрана

Question

Нестатический нижний колонтитул должен отображаться в нижней части экрана.

На мобильных устройствах на некоторых страницах моего приложения при загрузке страницы нижний колонтитул будет отображаться над нижней частью, так что между нижним колонтитулом и нижней частью страницы будет пробел. Есть идеи?

Отлично работает на экранах ПК.

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