html - 100vh 的主体尺寸不适用于响应式布局

Question

我在桌面的正常布局中将我的高度设置为 100vh(我什至尝试过 100%)它工作正常。但是当浏览器的垂直高度降低时，包括侧边栏在内的正文和其中的主要内容不是 100% 高度，也没有占据窗口的整个高度。我该如何进行提前谢谢。

我也试过设置

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

注意:我正在使用 bootstrap v3.3.7 scss 进行其他内部布局。

这里是 jsfiddle

注意 2: 当高度而非宽度收缩时，侧边栏会发生这种情况。 body 也一样。它没有占据屏幕的整个高度

Answer 1

检查 /* New Arrival */ 之后的 CSS

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