html - 使div固定在页面底部

Question

所以我制作了一个联系页面，我希望页脚 div 粘在页面底部，而不是紧跟在联系表格之后。

但如果我将所有内容放入 height:100%; 的容器 div 并制作页脚 bottom: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*/
}