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

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> 

编辑：添加了媒体查询。