当我缩小窗口时，为什么彩色背景不能完全覆盖我的页面？

Question

我正在开发一个动态更改为背景渐变的网页。

有两列 - 一列包含手机照片，另一列包含一些文字。当网页全屏显示时，它看起来像我想要的那样 - 渐变图层覆盖整个背景（拉伸到宽度/高度），照片紧挨着文字：

但是当我横向缩小网页时，文本会在图像下方（这很好），但渐变并不会覆盖整个页面，如下所示：

以下是我的代码完整的jsfiddle：https://jsfiddle.net/cj37qamw/

我在css样式表中有以下代码：

#gradient {
  width: 100%;
  height: 100vh;
}

所以我认为它应该有效 - 但事实并非如此。

你能帮助我并告诉它为什么不能正常工作吗？

Answer 1

评论后改变了答案：

我似乎找到了解决方案：https://jsfiddle.net/xh7L4rvt/1/

1。）我更改了Javascript中的选择器，以便将渐变应用于body而不是#gradient。

2。）在CSS中我改变了这个：

html,
body {
  background-color: #333;
  height: 100%;
  overflow: auto;
}

和

#gradient {
  width: 100%;
  height: 100%;
}

Answer 2

添加html和body标签，使其宽度和高度与#gradient ID相同：

html,
body,
#gradient {
  width: 100%;
  height: vh%;
}

var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}

setInterval(updateGradient,10);

html,
body {
  height: 100%;
  background-color: #333;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}

/*
* Cover
*/

.cover {
  padding: 0 20px;
}

@media (min-width: 768px) {
  
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {

  .cover-container {
    width: 700px;
  }
}

#gradient {
  width: 100%;
  height: vh%;
}

@media only screen and (max-width: 500px) { /* change max with to your needings */
    html,
    body {
      width: 100%;
      height: vh%;
    }
}

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<div id="gradient">

  <div class="site-wrapper">

    <div class="site-wrapper-inner">

      <div class="cover-container">

  

        <div class="inner cover">
          <div class="col-md-6">       
              <img src="http://mockuphone.com/static/images/devices/apple-iphone6-gold-portrait.png" class="img-responsive">             
          </div>
		  <div class="col-md-5">
             <div class="description">
				<h4>header</h4>
					<p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p>
              </div>
          </div>
        </div>

      </div>

    </div>

  </div>

</div>

编辑：添加了媒体查询。