CSS：四个div动态共享父级的高度

debugcn 发表于 Dev

尼卡

我在高度为的网格中有一个父div 29rem + 1fr。在div中有四个孩子。第一个和第三个具有固定的高度（两者都具有与其不变的内容相同的高度），第二个和第四个由于其内容必须具有动态高度。

HTML：

<body>
  <div class="unplanned"> Index
    <div class= "header"> </div>
    <div class="filter_line">filter: line </div>
    <div class="filter_date">filter: date </div>
   <div class="table">table </div>
  </div>
</body>

CSS：

.unplanned {z-index: 1500;
  grid-area: unplanned;
  width: 30rem;
  height: 96vh;/*right now it's set as fixed height that does not work it there is less content in filter_line*/}
.fitler_line {display: inline-block;
  margin-bottom: 3rem;
  margin-top: 3.3rem;
  margin-left: 2.9rem;}
.fitler_date {margin-left: 4rem;
  margin-bottom: 3rem;
  position: relative;
  padding-bottom: 2rem;}
.table {text-align: center;
  overflow-y: auto;
  height: calc( 100% - 32rem ); /*right now it's set as fixed height that does not work it there is less content in filter_line*/}

我尝试添加height: auto到“ filter_line”和“ table”中，并且可以扩展。它适合“ filter_line”中的所有行，但它会切断表而不会滚动。Flex无法正常工作，因为它会与网格混淆。

CSS或Sass中是否有一个优雅的解决方案，可以在没有JS的情况下适合所有“表”内容？

马克·扎德拉维克（Marko Zadravec）

答案在于flex属性。您可以使用flex将last div扩展到可用空间。Flex的很好的教程在这里。（请阅读以进一步了解）

解决方案在这里描述：

.parent {
  background-color:red;
  height:500px;
  display: flex;
  flex-flow: column;
}

.first {
  background-color:blue;
  height:50px
}

.second {
  background-color:green;
  flex: 0 1 auto;
}

.third {
  background-color:yellow;
  flex: 1 1 auto;
}

<div class="parent">
  <div class="first"></div>
  <div class="second">bdjasbdajsbdajsbd
  das<br>
  das<br>
  das<br>
  d<br>
  asd<br>
  a</div>
  <div class="third"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。