如何粘贴页脚到底部在css？ [英] How to stick a footer to bottom in css?

问题描述

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

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

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

In the HTML i got this simple structure

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

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

Here is the css code that is relevant for the css footer problem:

    *
    {
        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;*/
    }

我做错了？我真的试过了一切。
如果我错过任何有用的信息，请让我知道。

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

感谢您提前的任何建议。

Thank you for any suggestion in advance.

谨慎，

感谢大家的回答。
它使用：

thank you all for your answers. it worked with:

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

设置位置：固定由于某种原因在IE中无效（仍然在

setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

推荐答案

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

Try setting the styles of your footer to position:absolute; and bottom:0;.

这篇关于如何粘贴页脚到底部在css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！