CSS页面高度100vh不起作用

Question

我正在尝试将body和html设置为100vh / 100％我的浏览器工作正常但是一旦我得到的内容比原始页面长，它就会停止使用背景颜色，我可以＆＃ 39;没有任何意义。我在stackoverflow上查了很多帖子，但似乎无法找到诀窍。

这是我的页面的屏幕，我将背景设为红色以获得更好的可见性：

我的代码位于一个包含许多不同Sass文件的Angular 2应用程序中，但这里是设置菜单/内容区域和包装器的代码。

@import "../assets/sass/variables";


body, html {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #f6f6f6;
}

body, .wrapper {
  min-height: 100vh;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.main-content-area {
  position: relative;
  z-index: 2;
  float: right;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  background-color: red;
}


.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


@media (min-width: 576px) {

  .main-content-area {
    width: calc(100% - 50px);
  }

}

@media (min-width: 768px) {

  .container {
    width: 718px;
  }

}

@media (min-width: 992px) {

  .main-content-area {
    width: calc(100% - 200px);
  }

  .container {
    width: 792px;
  }

}

@media (min-width: 1200px) {

  .container {
    width: 1000px;
  }

}
@media (min-width: 1400px) {

  .container {
    width: 1170px;
  }

}

我希望以前有人有类似的问题。请注意，我的内容区域在红色背景和菜单背景后继续。任何帮助将不胜感激。干杯！