фон градиент не будет расширяться с содержанием

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% или что-то в этом роде.