如何让我的页脚对齐到底部？

Question

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

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

Answer 1

将位置更改为固定。

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

Answer 2

我还会添加左边的属性，以防有其他div可以推送页脚

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

Answer 3

尝试类似的事情;

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

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

Answer 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;
}