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>

代码实际上是可行的，让我将此导航栏放在页面底部。我尝试用<div class="navbar navbar-inverse navbar-fixed-bottom">甚至<footer class="navbar navbar-inverse navbar-fixed-bottom">替换<div class="footer navbar-inverse navbar-fixed-bottom"> 并且还在css上给它固定的高度。似乎没有任何改变。

我的页面的最后一部分被这个导航栏隐藏起来。我不能让它“粘”。

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

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

Answer 1

粘性页脚的工作方式是将其position设置为fixed，这会将其从文档流中取出，这意味着对于浏览器，它将不会出现＆＃34;＆＃34;＆＃34; 34;内容，它最终会超过它。为了避免这种情况，您可以在主体底部添加一些填充，以便将页脚向下推进一点：

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

body {
    padding-bottom: 100px;
}

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

1 个答案: