帮助页脚背景图片[重复]答案

【问题标题】：Help with footer background image [duplicate]帮助页脚背景图片[重复]
【发布时间】：2011-06-29 21:02:21
【问题描述】：

可能重复：
How do you get the footer to stay at the bottom of a Web page?

此页面上的第二个背景图片位置不正确...我正在努力解决...我需要页脚始终位于页面底部。 min-height 不起作用，因为无论分辨率如何，我都需要它始终保持在底部。

是否有针对此问题的 CSS 修复？

-网址已删除-

【问题讨论】：

页面底部是浏览器窗口的底部，可能与它下方的内容重叠，或者停留在窗口底部但如果页面内容大于该页面内容会扩展？

标签： css sticky-footer

【解决方案1】：

您必须将html 和body 设置为height:100%;

然后要克服 body 仅填充视口的另一个问题，您需要在所有内容周围放置一个包装器，将其最小高度设置为 100% 并将背景图像放置到该位置。

演示代码：http://jsfiddle.net/fNwNn/3/
实时取景：http://jsfiddle.net/fNwNn/3/show

【讨论】：

【解决方案2】：

听起来您正在寻找粘性页脚。

http://ryanfait.com/sticky-footer/

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

【讨论】：

【解决方案3】：

我想你想要的是position: fixed

试试这个：

#页脚 { 位置：固定；底部：0px； }

这会将页脚“粘贴”到窗口底部。

詹姆斯

【讨论】：

【解决方案4】：

看看这是不是你想要的： http://www.designersandbox.com/code/always-bottom-footer-with-css-only-tutorials/

还有一个活生生的例子：

http://demo.designersandbox.com/always_bottom_footer/index.html

如果您确实希望页脚能够覆盖页面内容，那么您应该删除此行

#vc-body{padding-bottom:80px;}

来自给定的示例。

【讨论】：

为什么投反对票？ Afaik 我的解决方案，JamWaffles 也实现了所要求的。