Question

所以我创建了一个联系页面，我希望页脚底部不会紧接在页面底部。

但是如果我把所有东西放到一个高度为100％的容器div中;并使页脚底部：0;然后页面将“太长”，你必须滚动等...

我的css到目前为止：

#footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;

}

页脚只是一个普通的全宽div，带有一些居中的文本atm。

Answer 1

您可以使用position: fixed来实现此目标。

.footer {
  position: fixed;
  bottom: 0;
}

使用此功能，您需要偏移页面底部，因此建议将padding-bottom添加到页脚高度的.main。

.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}

Answer 2

如果您需要粘性页脚，可以使用2种解决方案。

解决方案1：

HTML：

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

CSS：

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

示例：https://jsfiddle.net/ta1amejn/

解决方案2（使用表格属性）：

HTML：内容页脚

CSS：

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

示例：https://jsfiddle.net/zbtaoq1b/

如果您想要固定页脚，请使用此解决方案：

.footer{
    position: fixed;
    bottom: 0;
}

Answer 3

Pritesh Gupta's solution对我来说效果很好：

我复制+粘贴代码以防其网站出现故障：

这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
  </head>

  <body>
    <main>stuff</main>
    <footer>&copy; 2016</footer>
  </body>
</html>

这里是CSS：

body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}

我不知道它是否适用于旧浏览器，但我自己并不那么担心。

这也取决于你知道你的页脚的高度，虽然值得指出你不必像上面的代码那样手动设置高度，因为你总能找出什么如果你知道内容有多少垂直填充和行高......

希望这会有所帮助，我花了大部分时间在网上尝试每一个粘性页脚教程，然后绊倒了这种技术，虽然other技术确实有效，但这需要很少的努力。

Answer 4

您可以使用display: flex轻松完成此操作。您不关心高度body或wrapper标记。

示例：如果需要，请更改main tag任意值的高度，footer始终粘贴到底部（不是position: fixed）。

https://codepen.io/tronghiep92/pen/dzwRrO

HTML标记

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS解决方案

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

或者你可以：

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

将div粘贴到页面底部

4 个答案: