Question

我需要创建一个始终可见的页脚？我正在使用twitter bootstrap。当内容变长时，我必须向下滚动才能看到页脚，是否有办法始终显示页脚？

Answer 1

如果您使用的是Bootstrap 3.0，则可以添加一个简单的Nav-Class。

页脚始终固定在底部，始终可见。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <!-- Your Footer Content -->
</nav>

https://getbootstrap.com/docs/3.3/components/#navbar-fixed-bottom

Answer 2

在bootstrap 3.0中，你可以这样做：

  <body>
    <div id="wrap">
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
      </div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
  </body>

并在你的CSS中：

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

Twitter引导程序始终是可见的页脚

2 个答案: