css - 背景渐变不会随内容扩展

Question

我的网站有渐变背景，基本上将其水平分为两种颜色：

这是CSS：

html {
    height: 100%;
}
body {
    background: -webkit-linear-gradient(top, #f57171 0px, #f57171 600px, #FFFFFF 600px, #FFFFFF 100%);
}

这很好用，但是如果我的网站内容增加并且我必须向下滚动，则背景的白色不会一直到网站的末尾。它应该从 600 像素变为 100%，但它只是停止了。

有任何想法吗？

谢谢。

Answer 1

您正在将 html 设置为100%高度，这只是屏幕高度。尝试将html和设置body为min-height:100%;。

jsFiddle 示例。

另外，600px是任意一点，我会做些50%什么。