页脚无法正常显示并隐藏页面底部的内容

Question

我什至数不清我发现了多少关于此页脚的问题。所以，请原谅我这个问题，因为我尝试了每一个答案，但仍无法解决我的问题。

以具有 bootstrap 的行和列的网页为例。在它的最底部，就在容器流体结束 div 之前，我粘贴了这段代码，我后来修改它以添加第二个下拉菜单。

<!-- Fixed navbar --> 
    <div class="footer navbar-inverse navbar-fixed-bottom">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" onClick="history.go(-1)">&#171; MyPage</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#" data-theme="default_theme" class="theme-link">Just black</a></li>
                <li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li>
                <li><a href="#" data-theme="cyborg" class="theme-link">Cyborg</a></li>
                <li><a href="#" data-theme="journal" class="theme-link">Journal</a></li>
                <li><a href="#" data-theme="readable" class="theme-link">Readable</a></li>
                <li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li>
                  <li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li>
                  <li><a href="#" data-theme="united" class="theme-link">United</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Xml Themes <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#" xml-data-theme="default_xml" class="theme-xml-link">Simple white</a></li>
                <li><a href="#" xml-data-theme="dark" class="theme-xml-link">Dark</a></li>
                <li><a href="#" xml-data-theme="okaida" class="theme-xml-link">Okaida</a></li>
                <li><a href="#" xml-data-theme="coy" class="theme-xml-link">Coy</a></li>
                <li><a href="#" xml-data-theme="funky" class="theme-xml-link">Funky</a></li>
                <li><a href="#" xml-data-theme="solarized-light" class="theme-xml-link">Solarized Light</a></li>
                <li><a href="#" xml-data-theme="twilight" class="theme-xml-link">Twilight</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse --> 
      </div>
    </div>

  </div><!-- closing the container -->

</body>
</html>

代码可以正常工作，让我将这个导航栏放在页面底部。我尝试用 <footer class="navbar navbar-inverse navbar-fixed-bottom"> 甚至 <div class="footer navbar-inverse navbar-fixed-bottom"> 替换 <div class="navbar navbar-inverse navbar-fixed-bottom"> 并在 css 上给它固定高度。只是好像没什么变化。

我页面的最后一部分被这个导航栏隐藏了。我买不到 "sticky".

关于这个问题有任何答案吗？我想我已经阅读了与该主题相关的所有问题，但是..

编辑：添加了 jsfiddle https://jsfiddle.net/u2hw5pt2/1/

Answer 1

粘性页脚的工作原理是将其 position 设置为 fixed，这会将其从文档流中移除，这意味着对于浏览器而言，它不会出现 "after" 内容，它最终会结束它。为避免这种情况，您可以在正文底部添加一些填充，以便将页脚向下推一点：

https://jsfiddle.net/u2hw5pt2/2/

body {
    padding-bottom: 100px;
}

页脚无法正常显示并隐藏页面底部的内容

Footer does not display properly and hides content at the bottom of the page

css

footer

navbar