Html 页脚不在页面底部

我让我的页脚停留在我的页面底部，但我做了一些事情，不知道是什么，现在它在内容下面。我尝试更改包装器的最小高度值，但没有效果

页脚代码：

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

</body>
</html>

正文/包装样式：

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%;

}

尝试添加：

position:absolute;
bottom: 0;

添加到页脚选择器。

尝试添加：

position:absolute;
bottom: 0;

---

到您的页脚选择器。

可能是因为您的最小高度为95%。如果没有，您可以尝试：

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

---

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

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

---

使用

位置：绝对时要小心。在撰写本文时，当页面内容过多（足够滚动条使用）时，页面会中断。我假设您总是希望页脚位于内容下方

为了确保您的身体
最小高度
造型有效，请添加：

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;
}

这将从页面流中删除页脚，但这没关系，因为我们在页面底部为它分配了一个40px的空间。
使用
位置：绝对时要小心。在撰写本文时，当页面内容过多（足够滚动条使用）时，页面会中断。我假设您总是希望页脚位于内容下方

为了确保您的身体
最小高度
造型有效，请添加：

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;
}

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

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

试试这个

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

使用
位置：固定
，演示

使用
位置：固定
，演示

天才！谢谢：我不知道它为什么会移动，但很高兴你帮我修复了它。这很糟糕，如果内容超出了视口，它就会失败。。最好看看Ryan Fait的天才！谢谢：我不知道它为什么会移动，但很高兴你帮我修复了它。这很糟糕，如果内容超出了视口，它就会失败。。最好看看Ryan Fait的粘脚