100vh的机身尺寸无法在响应式布局中工作

Question

我在桌面的正常布局中将我的身高设置为100vh（我甚至尝试了100％）它工作正常。但是当浏览器的垂直高度减小时，包括侧边栏的主体和其中存在的主要内容不是100％高度不占据窗口的整个高度。我如何提前感谢。

我也尝试过设置

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

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

这是jsfiddle

注2：当高度缩小而不是宽度时，侧边栏会发生这种情况。身体也是如此。它不占据屏幕的全高

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/

上的演示

Answer 2

对我来说，问题在于缺少overflow: auto

html, body {
    overflow: auto;
}