CSS和元素的高度[关闭]答案

【问题标题】：CSS and height of the elements [closed]CSS和元素的高度[关闭]
【发布时间】：2020-01-02 18:29:00
【问题描述】：

如何在我的 SPA 应用程序中设置 div-s 的高度，以便满足以下条件（黑色和红色边框仅用于表示目的）：

黑色边框：其中的所有内容都必须适合屏幕大小，并且不能进一步扩展 - 只能在 div4 内进行垂直滚动。
每个视图中的红色框必须高度相同且对齐（如图所示）。

【问题讨论】：

请贴出您尝试过的代码。

【解决方案1】：

不要使用height，你只需要一个弹性布局。

.wrapAll{
  height: calc(100vh - 4px); 
  /* 4px due to borders */
  display: flex;
  flex-direction: column;
}

[class^=div]{
  display: flex;
  align-items: center;
  justify-content: center;
}

.div1 {
  flex-basis: 40px;
  flex-shrink: 0;
}

.otherDivs {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

.leftBar {
  flex-basis: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.body{
  flex-grow: 1;
  display: flex;
}

.div2, .div3, .div4, .div5 {
  flex-grow: 1;
  flex-shrink: 0;
}

.div4 {
  overflow-y: scroll;
}

/* styling */

.wrapAll {
  border: 1px solid black;
}

.leftBar {
  border: 1px solid red;
}

.body {
  border: 1px solid red;
}

.div1 {
  background: #719ecf;
}

.div2 {
  background: #fdf599;
}

.div3 {
  background: #fcf266;
}

.div4 {
  background: #6fee99;
}

.div5 {
  background: #234fcc;
  color: white;
}

body{
  margin: 0;
}

<div class="wrapAll">
  <div class="div1">div1</div>
  <div class="otherDivs">
    <aside class="leftBar">
      <div class="div2">div2</div>
      <div class="div3">div3</div>
      <div class="div4">div4</div>
    </aside>
    <main class="body">
      <div class="div5">div5</div>
    </main>
  </div>
</div>

【讨论】：