一尘不染

如何在CSS中将页脚置于底部?

css

我在浏览器底部放置页脚时遇到了经典问题。我尝试过包括在内的方法,但效果不佳:我的页脚始终始终显示在FF和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。


阅读 671

收藏
2020-05-16

共1个答案

一尘不染

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

2020-05-16