剩余可用空间 HTML 的高度 [重复]答案

【问题标题】：Height for remaining free space HTML [duplicate]剩余可用空间 HTML 的高度 [重复]
【发布时间】：2019-05-24 23:10:00
【问题描述】：

有三个容器，我怎样才能让两个容器浮动，而第三个容器应该占据剩余的高度，而第二个容器是内容的高度？

【问题讨论】：

标签： html css web browser

【解决方案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>

【讨论】：

left-top 高度是静态的 70px，我需要动态高度，即 wrap_content

【解决方案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

【讨论】：