html - 将 div 的高度匹配到完整的滚动条高度

Question

我的页面有 3 个主要 div:顶部菜单(静态高度)、主要内容(基于内容长度的可变高度)和侧边菜单

我希望侧边菜单的高度与主要内容的高度相匹配。主要内容是 min-height 100vh - topmenu 的高度，但大多数时候会高很多。我的问题是侧边菜单的内容通常要短得多。背景颜色和边框仅向下延伸以命中该内容。如果我尝试将高度设置为 100%，它会保持不变，而且我无法将其固定为静态高度，因为主要内容的高度是可变的。

如何使侧边菜单的高度与主要内容的高度相匹配。或者，将侧边菜单的高度设置为可滚动视口(viewport)的 100%。

我试过使用 Bootstrap 的网格系统进行设置，但还没有成功。

<div>
    <div class="container-fluid top-menu">...</div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 side-menu-view">...</div>
        <div class="col-md-20 main-content-view">...</div>
    </div>
</div>

CSS

.top-menu {
  height: 47px;
}

.side-menu-view {
  background-color: $background-light;
  border-right: solid 1px $border-light;      
  height: 100%;
}

.main-content-view {
  border-left: solid 1px $border-dark;
  height: 100%;
}

更新 包括jsfiddle https://jsfiddle.net/joshuaohana/DTcHh/12031/ 请务必将预览展开到全宽，以便您可以看到。问题是我想让红色背景向下延伸到右侧主要内容的整个高度

Answer 1

使用 flexbox , calc , 最小高度, ( unfortunately ) !important, and a media query ，我破解了我相信你正在寻找的解决方案:

.top-menu {
  height: 47px;
  background-color: blue;
}
.side-menu-view {
  background-color: red;
  border-right: solid 1px black;
}
.main-content-view {
  min-height: calc(100vh - 47px)!important;
}
@media(min-width: 992px) {
  .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<div>
  <div class="container-fluid top-menu">top menu</div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 side-menu-view">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
    <div class="col-md-10 main-content-view">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </div>
</div>