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 example .

此外，600px 是一个任意点，我会做 50% 或其他。