Question

我的页面有3个主要div：顶级菜单（静态高度），主要内容（基于内容长度的可变高度）和侧边菜单

我希望侧边菜单的高度与主要内容的高度相匹配。主要内容是最小高度100vh - topmenu的高度，但大部分时间它都高得多。我的问题是侧边菜单的内容通常要短得多。背景颜色和边框仅向下延伸以达到该内容。如果我尝试高度100％它保持不变，我无法将其固定到静态高度，因为主要内容的高度是可变的。

如何将侧边菜单的高度与主要内容的高度相匹配。或者，使侧边菜单的高度为可滚动视口的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

解决问题

Check this one

    .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    }

.flex-item:nth-child(1) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

Answer 2

使用flexbox，calc，min-height，（unfortunately）!important和media query，我破解了我认为您正在寻找的解决方案为：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Check this Out

.side-menu-view {
  background-color: red;
  border-right: solid 1px black;      

    float:right;
}

.main-content-view,.side-menu-view {
  height: 100vh;
    overflow:hidden;
}

我尽量做到尽可能准确。

Answer 4

您是否尝试为每个部分分配ID并从第一个框中拉出高度，将其放入变量中然后调用第二个框并将其高度指定为变量？使用Javascript。我在想：

<div id="first_box"></div>
<div id="second_box"></div>
<script type="text/javascript">
var box1_height;

box1_height = document.getElementById("first_box").style.height;

document.getElementById("second_box").style.height = box1_height;
</script>

将div的高度与完全滚动条高度匹配

4 个答案: