使div停留在页面底部 [英] Make div stick to bottom of page

问题描述

所以我创建了一个联系页面，我希望页脚div紧贴联系表格之后紧贴页面的底部.

So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.

但是，如果我将所有内容放到带有height:100%;的容器div中，并将页脚设为bottom:0;，则页面将太长"，您必须滚动等.

But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...

到目前为止，我的css:

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

页脚只是正常的全角div，带有一些居中的文本atm.

Footer is just a normal full width div with some centered text atm.

推荐答案

您可能可以使用position: fixed来实现.

You can probably use position: fixed to achieve this.

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

因此，您需要偏移页面底部，因此建议在.main中添加一个padding-bottom，即页脚的高度.

With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.

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

这篇关于使div停留在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！