如何在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

我在这个粘性页脚教程中遇到了类似的问题。如果内存服务，您需要将表单标记放在<https://codepen.io/datvm/pen/vPWXOQ部分中，因为表单标记本身会导致阵容出现问题。

Answer 3

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

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

Answer 4

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

为我工作

Answer 5

我想很多人都在寻找一个底部的页脚滚动而不是固定，称为粘性页脚。当高度太短时，固定页脚将覆盖身体内容。您必须将html，body和page容器设置为100％的高度，将页脚设置为绝对位置bottom。您的页面内容容器需要相对位置才能工作。您的页脚的负边距等于页脚高度减去页面内容的下边距。请参阅我发布的示例页面。

注释示例：http://markbokil.com/code/bottomfooter/

Answer 6

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

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

Answer 7

这对我有用：

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}

Answer 8

如果使用“position：fixed; bottom：0;”如果页面长于浏览器窗口，您的页脚将始终显示在底部并隐藏您的内容。

Answer 9

以下css属性将执行此操作

position: fixed;

我希望这有帮助。

Answer 10

对于现代浏览器，您可以使用flex布局来确保页脚无论内容长度如何都保持在底部（如果内容太长，则底部不会隐藏内容）

HTML布局：

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS：

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

但是：Kua zxsw指出