爲什麼當我縮小窗口時，彩色背景不能完全覆蓋我的頁面？

Question

我正在使用動態更改漸變背景的網頁。

有兩列 - 一列包含手機照片，另一列包含一些文字。當網頁是全屏幕上，它看起來像我想 - 漸變層覆蓋整個背景（拉伸到寬/高）和照片旁邊的文字：

但是，當我縮小網頁水平，文雲圖像下（這是好的），但坡度並不覆蓋整個頁面，如下所示：

這裏是我的代碼完整的jsfiddle：https://jsfiddle.net/cj37qamw/

我 - 在css樣式 - 下面的代碼：

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

，所以我認爲它應該工作 - 但事實並非如此。

你能幫助我，並告訴它爲什麼不工作，因爲它應該？

Answer 1

CHANGED ANSWER COMMENTS AFTER：

看來我找到了解決方案：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> 
 
\t \t <div class="col-md-5"> 
 
      <div class="description"> 
 
\t \t \t \t <h4>header</h4> 
 
\t \t \t \t \t <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>

編輯：添加的媒體查詢。