html - 如何使页脚与最底部对齐？

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 并且可以推动页脚，我还会添加 left 属性

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

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

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