如何使页脚粘在页面底部？答案

【问题标题】：How can I make my footer stick to the bottom of the page?如何使页脚粘在页面底部？
【发布时间】：2013-09-26 13:29:15
【问题描述】：

Problem area

正如您在上面的网站中看到的，页脚没有附加到页面底部，因为没有足够的内容。我想要页脚：

在没有滚动时位于页面底部
当窗口进一步缩小时，我希望我的内容定义最小值（换句话说，页脚不应与内容重叠
当内容很多时，我希望页脚位于页面底部（在滚动之前不一定可见）

我尝试使用http://www.cssstickyfooter.com/ 上的示例，但收效甚微，我能做到的最好的方法是将页脚粘在底部，但在调整窗口大小时它会与内容重叠。

谁能告诉我是否有办法让它在不改变页面结构的情况下工作？

我已经花了大约 6 个小时试图让它发挥作用，并尝试了无数种技术。如果有人可以尝试这样做并且只提交他们针对我的网站测试过的答案，我将非常感激。就像我说的那样，我想这样做而不必更改代码的结构。

【问题讨论】：

标签： css sticky-footer

【解决方案1】：

试试这个怎么样：-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

^{Credits for above code}

还要检查参考资料：-

【讨论】：

position: fixed;?这不是粘性页脚的工作方式，放大和滚动内容，你会明白我在说什么
所以使用这种方法（Fait's Method），我能够达到与使用 cssstickyfooter.com 方法（不需要推送）相同的点，但是无论哪种方式，除非我将页面（与您的示例中的包装器相同）更改为包装器，页面上没有最小高度，并且调整窗口大小使页脚覆盖内容：/

【解决方案2】：

尝试将min-height 设置为page

 #page
 {
   min-height:210px;
 }

【讨论】：