剩余可用空间HTML的高度

Question

有三个容器，如何使两个容器浮动，而第三个容器应占据其余高度，而第二个容器应具有所容纳内容的高度？

Answer 1

尝试使用具有以下属性的Flex。

body {
  margin: 0;
}

.outer {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.left {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.left-top {
  height: 70px;
  width: 100%;
  background: royalblue;
}

.left-bottom {
  background: orange;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  flex: 3;
  background: yellow;
}

<div class="outer">
  <div class="left">
    <div class="left-top"></div>
    <div class="left-bottom">
      Full length
    </div>
  </div>
  <div class="right"></div>
</div>

Answer 2

有多种技术可以实现这一目标。这是我使用float和vh可以想象的最简单的一个。

HTML：

<div class="mama">
    <div class="container1">Container 1</div>
    <div class="container2">Container 2</div>
</div>
<div class="container3">Container 3</div>

CSS：

.mama {
  float: left
}
.container1 {
  height: 10vh;
  background-color: gray;
}

.container2 {

  height: 90vh;
  background-color: red;
}

.container3 {
  width: 100%;
  background-color: orangered;
  height: 100vh;
}

这里是codepen