如何在CSS中将页脚粘到底部？

Question

我有一个经典的问题,在浏览器的底部定位页脚.我已经尝试了一些方法,包括http://ryanfait.com/resources/footer-stick-to-bottom-of-page/,但结果不好:我的页脚总是一直出现在FF和浏览器窗口的中间IE浏览器.

在HTML中我得到了这个简单的结构

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

这是与css页脚问题相关的css代码:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

我哪里做错了？我真的尝试了一切.如果我错过了任何有用的信息,请告诉我.

感谢您提前提出任何建议.

问候,

---

谢谢大家的答案.它适用于:

position:absolute;
    width:100%;
    bottom:0px;

设置位置:由于某种原因,在IE中无法正常工作(仍然在浏览器中间显示页脚),仅适用于FF.

Answer 1

尝试将页脚的样式设置为position:absolute;和bottom:0;.

Answer 2

#Footer {
  position:fixed;
  bottom:0;
}

无论您在哪里滚动,这都会使页脚停留在浏览器窗口的底部.

Answer 3

#Footer {
position:fixed;
bottom:0;
width:100%;
}

为我工作

Answer 4

假设您知道页脚的大小，您可以这样做：

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }

Answer 5

我认为很多人都在寻找底部可以滚动而不是固定的页脚，称为粘性页脚。当高度太短时，固定页脚会覆盖正文内容。您必须将 html、正文和页面容器的高度设置为 100%，将页脚设置为绝对位置底部。您的页面内容容器需要相对位置才能正常工作。页脚的负边距等于页脚高度减去页面内容的下边距。

Answer 6

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

http://codepen.io/smarty_tech/pen/grzMZr