html - 100vh的主体大小无法在响应式布局中工作

我把我的身高设置为100vh（我甚至尝试了100%），在正常的桌面布局，它工作得很好。但是，当浏览器的垂直高度降低时，包括侧边栏在内的主体及其内部的主要内容并不是100%的高度，而是不能占据窗口的全部高度。我该怎么办？谢谢。
我也试过设置

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

注：
我正在使用bootstrap v3.3.7scss进行其他内部布局。
这里是jsfiddle
注2：当边栏的高度缩小而不是宽度缩小时，会发生这种情况。同样的情况也发生在身体上。它没有占据屏幕的全部高度

最佳答案

在/* 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/上的演示