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

Question

因此，我正在尝试做 2 件单独运作良好的事情，但我在将它们整合在一起时遇到了麻烦。首先，这是该站点的链接: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%，但除非我使用最小高度值定义它们，否则背景图像只会覆盖加载时的屏幕。这意味着如果/当需要向下滚动时，背景图像只会向下滚动到屏幕底部加载的位置。

我已经玩了几个小时了，但似乎找不到解决办法。我是否遗漏了一些明显的东西？

Answer 1

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