页脚不停留在页面底部答案

【问题标题】：Footer not staying at the bottom of page页脚不停留在页面底部
【发布时间】：2013-07-06 13:33:55
【问题描述】：

我让页脚留在页面底部here，但我做了一些事情，不知道是什么，现在它在内容下方。我试过改变包装器的最小高度值，但它没有做任何事情。

页脚代码：

<div id='footer'>&copy; Copyright 2013 Austen Patterson. All Rights Reserved.</div>

</body>
</html>

页脚样式：

#footer {
margin-right: 10%;
min-width: 100%;
color: #4bb3e6;
text-align: right;
}

正文/包装样式：

body {
    background:url("http://pattersoncode.ca/incls/pw_pattern.png");
    color: black;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana, sans-serif";
    min-width: 94%;
    min-height: 95%;
    font-family: 'Muli', sans-serif;
}
#wrapper {

    animation: fadein 2s;
    -moz-animation: fadein 0.25s; 
    -webkit-animation: fadein 0.25s; 
    -o-animation: fadein 0.25s;
    min-width: 100%;
    min-height: 95%;

}

【问题讨论】：

标签： html css

【解决方案1】：

尝试添加：

position:absolute;
bottom: 0;

到您的页脚选择器。

【讨论】：

天才！谢谢 :D 不知道它为什么会移动，但很高兴你帮我修复它
这很糟糕，如果内容超出视口，它将失败.. 最好看看 Ryan Fait 的 Sticky Footer

【解决方案2】：

使用position: absolute 时要小心。在撰写本文时，当页面上的内容过多（滚动条的内容足够）时，页面会中断。我假设您总是想要内容下方的页脚。

为了确保您身体的min-height 样式有效，请添加：

html { height: 100% }

此外，为确保您的页脚始终显示在内容下方，请添加

body {
    margin: 0; //remove default margin. you may not need
               //this, but it will prevent problems with
               //the body being too big
    min-height: 100%;
    box-sizing: border-box; //making sure padding works with 100% sizing.
    padding-bottom: 40px; //just enough for your footer
}
#footer {
    position: absolute;
    bottom: 0;
}

这将从页面流中删除您的页脚，但这没关系，因为我们在页面底部为它分配了 40 像素的空间。

【讨论】：

【解决方案3】：

试试这个

#footer {
    background: none repeat scroll 0 0 transparent;
    color: #4BB3E6;
    position: fixed;
    text-align: right;
    width: 100%;
}

【讨论】：

【解决方案4】：

使用positon:fixed，DEMOhttp://jsfiddle.net/VDfcC/

#footer {
    position:fixed;
    left:0;
    bottom:0;
    z-index:10;
    margin-right: 10%;
    min-width: 100%;
    color: #4bb3e6;
    text-align: right;
}

【讨论】：

【解决方案5】：

嗯，也许是因为您的最小高度为 95%。如果没有，你可以试试：

#footer {
position: absolute;
bottom: 0;
margin: 0 auto;
}

【讨论】：