ウィンドウを縮小すると、カラフルな背景がページを完全に覆わないのはなぜですか？

Question

私はグラデーションを背景に動的に変更したWebページを作成しています。

2つの列があります.1つは電話機の写真、もう1つはテキストです。 Webページがフル画面に表示されているとき、私が好きな、それが見えます - 勾配層は（幅/高さまで伸長）全体の背景をカバーし、写真、テキストの隣にあります：

しかし、私はスケールダウンするときWebページは水平に、テキストが（結構です）画像の下になりますが、ここに見られるように勾配が、ページ全体をカバーしていない：https://jsfiddle.net/cj37qamw/

：

ここに私のコードとの完全なjsfiddleです

私が持っている - cssスタイルシートで - 次のコード：

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

ので、私はそれが動作するはずと思った - しかし、それはしていません。

あなたは私を助け、なぜそれがうまくいかないのかを教えてもらえますか？コメントAFTER

Answer 1

CHANGED答えは：勾配はbody代わりの#gradientに適用されるように、私はJavaScriptでセレクタを変更https://jsfiddle.net/xh7L4rvt/1/

1）：

私は解決策を見つけたと思われます。

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

と

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

Answer 2

あなた#gradientのIDと同じ幅と高さを持つようにhtmlと体のタグを追加：：

2）はCSSで私はこれを変更しました

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>

EDIT：追加したメディアクエリー。