為什么縮小窗口時彩色背景不能完全覆蓋我的頁面？

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> 

編輯：添加了媒體查詢。