背景图像和固定高度粘滞页脚答案

【问题标题】：Background image and fixed height sticky footer背景图像和固定高度粘滞页脚
【发布时间】：2014-01-14 08:01:30
【问题描述】：

这是我的 html/css 的骨架：http://jsfiddle.net/GMg7B/。

现在我想为div#content 部分添加背景图片，以便：

它会调整大小以适应其容器（类似于 background: cover）
不与页脚重叠。
图像的纵横比保持不变。
调整背景图像的高度以适应“屏幕的全高减去页脚高度”，必要时在两侧填充白色背景以填充全宽。
页脚具有固定高度，它始终被推到页面底部并且在没有滚动条的情况下保持可见，与屏幕高度无关。

非常感谢。

【问题讨论】：

“不与页脚重叠”是什么意思。您在内容上设置了-120px 边距，页脚将始终重叠。 DEMO
在你的小提琴中，页脚不是固定宽度
怎么了？ jsfiddle.net/GMg7B/3
抱歉，我的意思是固定高度。
@deivid 你不是很清楚，你想要纵横比相同还是只是拉伸？

标签： html css

【解决方案1】：

将此添加给您#contentcs

  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size:  100% 100%;

为什么会延伸到页脚？？因为您的行 margin: 0 auto -120px; 与 footer 冲突

working demo

如果您删除 -120px 边距，即使 background-size: cover; 也可以使用！！

cover demo

保持背景图像的纵横比：

aspect ratio demo
只需从我上面引用的 css 中删除 fixed 即可完成！

至于页脚留在底部

你可以使用 css calc() 方法：

类似：

#footer{
  margin-top : calc(100% - footer_height_in_px); /* default */
  margin-top : -moz-calc(100% - footer_height_in_px); /* moz */
  margin-top : -webkit-calc(100% - footer_height_in_px); /* webkit browsers */

}

如果您感兴趣，请参考这些链接：

【讨论】：

你为什么总是在身边！ +1，因为我认为这是 OP 所要求的。即使 OP 出于某种原因在内容上有一个奇怪的 -120px margin。
@Ruddy : 嗨......你的朋友要么是我，要么是外星人......所以只是想路过！！
谢谢@NoobEditor，我现在正在尝试你的小提琴，我再次编辑了我的问题。我很难让自己理解，对不起。
@deivid : 是什么让你很难过......也许我可以帮助你理解！ :)
我认为问题的最终规格！如果我放弃负边距，则会出现一个滚动条，我希望页脚在没有滚动条的情况下保持在底部可见。一百万谢谢！