Question

我正在使用Twitter Bootstrap 3.3.1，模板“Jumbotron”。

在这里，我的页面：

<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
        <!-- content -->
        </div>
    </div>
</div>
<div class="jumbotron">
    <div class="container">
        <!-- content -->
    </div>
</div>

<div id="root" class="container">
    <div id="main" class="row">
        <section id="content">
            <!-- content -->
        </section>
    </div>

    <footer>
        <!-- content -->
    </footer>
</div>

在浏览器上，标题（带有“navigation”角色的div +带有“jumbotron”类的div）的大小为290px。

当我试图用我发现的所有内容将底部推到底部时，我总是遇到同样的问题。我想，“root”和“main”div总是比屏幕显示更长，因为标题。许多互联网的解决方案都不包括标题...... :(

我不想用“位置：固定”修复页脚，我真的想用CSS将它推到底部。

更具体地说，我的页脚必须留在页面的底部，有或没有内容。如果内容是排序器而不是屏幕，则页脚将位于屏幕的底部。如果内容长于屏幕，则页脚将位于页面的末尾。

编辑：我不想用Bootstrap来做。如果Bootstrap无法做到，我只想要一些没有Bootstrap的CSS来做这件事！

我希望它足够清楚。

如果有人有想法，那就会结束我的一天！

感谢。

Answer 1

Bootply Example

你试过这个吗？

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <!-- content -->
    </div>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <!-- content -->
  </div>
</div>

<div id="root" class="container">
  <div id="main" class="row">
    <section id="content">
      <!-- content -->
    </section>
  </div>

  <footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <!-- content -->
        </div>
      </div>
    </div>
  </footer>
</div>

此外，如果这不是您正在寻找的内容，请编辑您的问题并尝试更详细。

编辑

OP正在寻找navbar-static-bottom，它将页脚呈现在页面最底部 REGARDLESS *页面内容/高度。唯一的问题是，此类尚未添加到引导程序中。它位于提交列表中，但尚未可靠地实现。

Commit Log for Bootstrap

请参阅此文档，了解navbar-static-bottom课程的状态。截至目前，在Bootstrap中没有可靠的方法。

Answer 2

在bootstrap中，您可以使用

类设置页脚样式

   navbar-fixed-bottom

默认页脚可能如下所示：

<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Answer 3

你看过这些例子吗？

http://getbootstrap.com/examples/sticky-footer/

或

http://getbootstrap.com/examples/sticky-footer-navbar/

Answer 4

这是我的最爱：

http://www.cssstickyfooter.com/

多年来，它一直像魅力一样工作。

希望这有帮助！

Answer 5

所以你想用css将页脚保持在页面底部，你可以这样做：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    bottom: 0;
}

页脚固定底部带有标题和Bootstrap

5 个答案: