javascript - 拉伸(stretch)背景渐变高度为 : 100% on html

Question

我需要能够在整个页面上拉伸(stretch)背景渐变，现在它只在当前视口(viewport)中拉伸(stretch)然后重复。如果我删除 height: 100% on html, body { } 它会破坏页面的整个布局。有没有解决的办法？

谢谢

https://jsfiddle.net/wrqm3d0v/

html, body {
  height: 100%;
  //min-height:100%;
}

html {
  background: #58abfb;
  /* Old browsers */
  background: -moz-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #58abfb 0%, #9acaf4 39%, #9acaf4 52%, #d3d3d3 83%, #c6c6c6 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#58abfb', endColorstr='#c6c6c6', GradientType=0);
  /* IE6-9 */
  background-size: auto, cover;
  background-position: top left, center;
  background-attachment: scroll, fixed;
}

#container {
  height: 100%;
}

Answer 1

只需使用最小高度:

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

更新的 fiddle :https://jsfiddle.net/wrqm3d0v/2/