html - CSS和元素的高度

Question

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

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

标签： htmlcsssassflexboxless

Answer 1

不要使用height，您只需要一个 flex 布局。

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