如何使页脚与最底部对齐？答案

【问题标题】：How can I make my footer align to the very bottom?如何使页脚与最底部对齐？
【发布时间】：2012-08-25 21:29:51
【问题描述】：

我是 CSS 新手，已经查找了很多方法，但无法让页脚与底部对齐。有什么帮助吗？谢谢。

.footer {
    position: bottom;
    bottom: -10px;
    height: 30px;
    width: 100%;
    background-color: #171717;
    color: white;
}

【问题讨论】：

标签： html css alignment footer

【解决方案1】：

将位置更改为固定。

.footer {
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

【讨论】：

【解决方案2】：

我还会添加 left 属性以防有其他 div 并且可以推动页脚

.footer {
    position:absolute;
    bottom:0px;
    left: 0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

【讨论】：

【解决方案3】：

试试类似的东西；

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #171717;
    color: white;
}

Here 是一个有效的现场演示。

【讨论】：

【解决方案4】：

Codepen 上的演示

HTML：

<div class="header">
  <h2>header</h2>
</div>
<div class="container">
  <h2>container</h2>
</div>
<div class="footer">
  <h2>footer</h2>
</div>

CSS：

body {
  height: 100%;
  width: 100%;
  display: table;
}
html {
  height: 100%;
}
.header {
  background: #f00;
  color:#fff;
  text-align: center;
}
.container {
  text-align: center;
}
.footer {
  background: #ff0;
  text-align: center;
  width: 100%;
  display: table-footer-group;
}

【讨论】：