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

Question

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

我也试过设置

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

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

这里是jsfiddle

注2：这是当高度而不是宽度收缩时侧边栏会发生的情况。 body too.it 未占据屏幕的全高时也会发生同样的情况

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;
}

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

body size of 100vh not working in responsive layout

html

css

responsive