79

我有一些网页内容不多，页脚位于页面中间，但我希望它位于底部。

我已将所有页面放在“持有人”中

#holder {
  min-height: 100%;
  position:relative;
}

然后为我的页脚使用以下 CSS

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

我的页脚的 html

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想保持页脚流畅。

4

7 回答 7

102

只需将类 navbar-fixed-bottom 添加到您的页脚。

<div class="footer navbar-fixed-bottom">

Bootstrap 4 的更新 -

正如 Sara Tibbetts 所提到的 - 课程是固定底部的

<div class="footer fixed-bottom">
于 2014-02-06T13:22:15.500 回答
44

正如评论中所讨论的，您的代码基于此解决方案：https ://stackoverflow.com/a/8825714/681807

该解决方案的关键部分之一是添加height: 100%到，html, body因此#footer元素具有可以使用的基本高度 - 您的代码中缺少这一点：

html,body{
    height: 100%
}

您还会发现使用时会遇到问题，bottom: -50px因为当内容不多时，这会将您的内容推到首屏。您必须添加margin-bottom: 50px到#footer.

于 2012-07-19T09:43:22.027 回答
12

上面提到的大多数解决方案都对我不起作用。但是，下面给出的解决方案工作得很好： 

<div class="fixed-bottom">...</div>

资源

于 2017-10-17T07:31:28.440 回答
8

http://bootstrapfooter.codeplex.com/

这应该可以解决您的问题。

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS：

html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
于 2012-07-19T09:07:29.530 回答
6

这是一个使用 css3 的示例：

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

小提琴

于 2014-10-10T17:39:33.433 回答
6

使用引导类对您有利。navbar-static-bottom把它留在底部。

<div class="navbar-static-bottom" id="footer"></div>
于 2015-07-01T12:58:45.083 回答
1

它可以通过 CSS flex 轻松实现。具有如下 HTML 标记：

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

应使用以下 CSS：

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

这是可以使用的 CodePen：https ://codepen.io/webdevchars/pen/GPBqWZ

于 2019-01-08T21:54:17.410 回答