全屏背景图像与页脚位置产生冲突

Question

所以我正在尝试做两件单独工作的事情，但我无法将它们整合在一起。首先，这是该网站的链接：http://ericbrockmanwebsites.com/dev4

使用创建全屏背景图像

html {
  min-height:100%;
  background-size: cover;
  background-image: url(images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
}

创建一个留在页面底部的页脚，即使没有内容，这通常需要这样的内容：

html {
  height:100%;
}

body {
  height:100%;
}

.container {
  min-height:100%;
}

#footer {
  clear:both;
  position:relative;
}

问题是，为了让页脚保持在底部，需要将 html / body 的高度定义为 100%，但除非我使用 min-height 值定义它们，否则背景图像只会覆盖加载时的屏幕。这意味着如果/当需要向下滚动时，背景图像只会下降到加载屏幕底部的位置。

我已经玩了几个小时，但似乎找不到解决办法。我错过了什么明显的东西吗？

Answer 1

首先，height 和 min-height 并不相互排斥。没有理由不能同时使用两者。至于页面长于可用空间时的背景滚动，你试过background-attachment: fixed吗？