Question

我正在构建一个使用Bootstrap的应用程序。我希望这个应用程序有一个页脚。页脚需要“粘”到底部。换句话说，如果内容大于屏幕的高度，则页脚应该仍然可见，内容在其下面。如果内容小于屏幕的高度，我仍然需要将页脚粘到底部。我尝试使用sticky footer。但是，这不起作用。目前，我正在尝试以下方法：

Here's My Plunker

我的HTML看起来像这样：

<div class="footer">
  <div class="container text-center">
    <button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
    &nbsp;
    <button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
  </div>
</div>

如何构建一个永久粘在底部的页脚？我基本上试图建立一个只在网站上运行时才能看到的“动作栏”。

感谢您的帮助。

Answer 1

你应该改变页脚位置：

.footer {
    background-color: #f5f5f5;
    bottom: 0;
    height: 60px;
    position: fixed; /*change it*/
    width: 100%;
}

Answer 2

使用以下代码

    .footer {
     background-color: #f5f5f5;
     bottom: 0;
     height: 60px;
     position: fixed;
     width: 100%;
    }

Answer 3

Bootstrap自带的导航元素可以作为页脚滚动。

只需创建元素，然后添加以下 navbar navbar-default navbar-fixed-bottom 。

<footer>
  <div class="navbar navbar-default navbar-fixed-bottom" id="footer">
    <div class="container">
      <p>this is your footer that sticks to the bottom</p>
    </div>
  </div>
</footer>

然后，您可以通过将包含div分成像

这样的块来扩展它

    <div class="row">
        <div class="row">
            <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
    </div>

以上内容 容器div

如此处所示http://jsfiddle.net/showcaseimagery/5y14pqgv/

使用Bootstrap创建固定页脚

3 个答案: