Question

我试图强制我的页脚放在我网站的底部。我滚动时不希望它粘在一起，只是在向下滚动网页时显示在底部。

目前 - 显示网页，页脚位于内容下方。我添加了bottom:0;这样的代码，发现它坚持并且不适合我的网站。我还在其他stackoverflow问题上添加了html, body { height:100%;}这样的代码 - 但是没有任何乐趣。

任何建议都将受到赞赏。

代码：

    .footer {
    	background: #F37A1D;
       	position : absolute;
    	width: 100%;
    	border-top: 3px solid #F37A1D;
    }

    <div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>

Answer 1

*{
    padding: 0;
    margin: 0;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background: #F37A1D;
 border-top: 3px solid #F37A1D;   
}

<div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>

Answer 2

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

<footer class="navbar-fixed-bottom">
    <p>Footer content</p>
</footer>

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">
    <h1>Twitter Bootstrap 3.0</h1>
  </div>

  <footer class="navbar-fixed-bottom">
    <p>Footer content</p>
  </footer>

</div>

＆＃13;

您可能还想参考Bootstrap sticky footer CSS。

Answer 3

这个例子似乎有效。

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

此外，这是一个使用小jQuery的粘性页脚

http://codepen.io/imohkay/pen/htpzf

.footer {
        background-color: #f5f5f5;
        bottom: 0;
        height: 60px; 
}

Answer 4

如果您在内容div上设置了min-height，那么无论是否有足够的内容单独推送它，页脚总是会被推到底部。

Bootstrap页脚不在底部

4 个答案: