ボディサイズが100vhで反応しないレイアウトで働いています

Question

私は自分の体の高さを100vhに設定しました（私は100％も試しました）。しかし、ブラウザの縦の高さが低くなると、サイドバーを含む本体とその内部にあるメインコンテンツが100％の高さではなく、ウィンドウの高さ全体を占めていません。事前にどうやって進めていくのですか？

私も

html{ 
    height:100%; 
} 
body{ 
    height:100%; 
} 

注意を設定しようとした： を私は他の内部レイアウト機能のためのブートストラップv3.3.7のSCSSを使用しています。これは高さがない幅を縮めている時にサイドバーに何が起こるかです：ここ

はjsfiddle

注2です。我々はいくつかのコードを見ることができます同じボディtoo.itが

Answer 1

画面の全高を占有されていないために発生したCSSをチェック/* New Arrival */

html, body { 
    margin: 0; 
    padding: 0; 
    min-height: 100vh; /* use min-height 100 vh instead of height to allow extended height with large content */ 
} 
ul { margin: 0} /* Remove the white space because of the ul margin */ 
nav { background-color: #ff9090; } 
/* Uncomment the following line to see different effect */ 
/* nav { position: fixed; top: 0; left: 0; right: 0; } */ 
.sidebar { background-color: #ff6d00; } 
.maincontainer { background-color: #aaa; } 

/* min-height and height CSS properties of .appcontent should be applied as following to take the fill height effect. display: table; to allow it's children to take the effect as well */ 
.appcontent { min-height: 100vh; height: 100%; display: table; } 
/* Since .appcontent display as table, it's children should be displayed as table row */ 
.appcontent > * { display: table-row; } 

/* To avoid the first 'table row' take most height of parent, set it's height to 0. The broser should be able to render the correct height */ 
.appcontent .sidebar, .appcontent .sidebar > * { height: 0; } 
/* Like the table case, the immediate elements inside a table-row element should display as table cell */ 
.appcontent .sidebar, 
.appcontent .maincontainer > * { display: table-cell; } 

後https://jsfiddle.net/7d7nLrfj/3/