当内容溢出时如何强制下载整个页面的背景？

Question

我想要一个渐变背景，我的网站的主要内容在一个单独的div中，并有自己的背景颜色。

当div的高度小于页面的高度时，一切似乎都很好。但是，当div的高度大于页面/窗口的高度（内容溢出屏幕）时，背景渐变似乎停止。

这个JSFiddle说明了我的问题：http://jsfiddle.net/AEpE5/

如果您增加结果窗口的高度以便完全包含内容div，则可以看到背景渐变显示在内容下方。但是如果你降低结果窗口的高度（或者只是在div中添加更多内容），那么内容div就不会完全包含在结果窗口中，然后向下滚动（以便查看<{1}}）中的其他内容，您可以看到背景渐变似乎已经结束。

显然，我希望我的背景渐变能够继续整个页面（直到我到达内容的末尾，而不仅仅是到窗口的末尾）。如何实现？

Answer 1

摆脱

html {
  height: 100%;
}

这将停止渐变。

http://jsfiddle.net/AEpE5/3/

Answer 2

将您的body {...}更改为html, body {...}

http://jsfiddle.net/gDg8p/

Answer 3

删除它：

html{
    height: 100%;
    min-height: 100%;
}

http://jsfiddle.net/AEpE5/2/

只需注意，HTML不需要设置为100％，除非您还将正文设置为100％，因此您的元素可以是100％。