我知道我来晚了，但这里有一个更可靠的答案。

你所需要做的就是使用min-height: 100%;而不是身高:100%;你的渐变背景会扩展内容的整个高度而不会重复，即使内容是可滚动的。

是这样的:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

不过，还有第二种解决方案。

正如其他人所说，在背景声明中添加固定值，将使渐变扩展视口的全部高度。

是这样的:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

当然，你仍然需要声明min-height: 100%;在html中。

下面是CodePen中的一个演示，您可以使用这两种解决方案:https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

肮脏的;也许你可以添加一个min-height: 100%;到html，和主体标签?或者至少设置一个默认的背景色，它也是渐变结束的颜色。

我已经使用了这个CSS代码，它为我工作:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

一个相关的信息是，你可以在http://www.colorzilla.com/gradient-editor/上创建自己的伟大的渐变

/斯滕

这个页面上有很多不完整的信息，但不是完整的。我是这样做的:

在这里创建渐变:http://www.colorzilla.com/gradient-editor/ 在HTML上设置渐变而不是BODY。 用"background-attachment: fixed;"修复HTML的背景 关闭主体的顶部和底部边距 (可选)我通常创建一个<DIV id='容器'>，我把我所有的内容

这里有一个例子:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

这已经在IE、Chrome和Firefox中测试过了，测试了不同大小和滚动需求的页面。

下面是我解决这个问题的方法……它将显示内容的整个长度的渐变，然后简单地退回到背景色(通常是渐变中的最后一种颜色)。

html { 背景:# cbccc8; ｝ 身体{ 平铺方式:不再重演; 背景:# cbccc8; 背景:-webkit-gradient(线性，左上，左下，从(#fff)，到(#cbccc8)); 背景:-moz-linear-gradient(top， #fff， #cbccc8); filter: progid: DXImageTransform.Microsoft。梯度(startColorstr = # ffffff, endColorstr = ' # cbccc8 '); ｝ <身体> <标题> Hello world !< / h1 > < /身体>

我已经在FireFox 3.6, Safari 4和Chrome中进行了测试，我将背景颜色保留在任何浏览器的主体中，因为某些原因不支持样式化HTML标签。

关于之前的回答，如果内容需要滚动，将html和body设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;

例如:

身体{ 背景:-webkit-gradient(线性，左上，左下，从(#fff)，到(#cbccc8))固定; ｝