如何获得此布局（使用 CSS flexbox）？

Question

我有以下标记：

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

我想弄清楚我需要添加什么 CSS 以使内容区域填满任何垂直 space 未被条带或页脚。

请注意，容器是 position: fixed，top: 0 和 bottom: 0，因此容器占据了浏览器 window 的 100% 高度。此外，strip 有一个设置的高度，但页脚没有（也不能，因为内容有点动态）。但是，我希望页脚占用所需的最小 space 空间，并让内容区域填满页面上剩余的垂直空间 space。

我想我需要使用 flexbox 来做到这一点，但我不确定。

这是我目前的CSS：

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Answer 1

你可以在不使用 flexbox 的情况下做到这一点...

代码如下：

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  background-color: red;
  height: 100vh;
  width: 100vw;
}

.strip {
  height: 20%;
  background-color: green;
}

.content {
  height: auto;
  background-color: blue;
}

.footer {
  height: 20%;
  width: 100%;
  background-color: black;
  position: absolute;
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

Strip 和 Footer 有固定的高度（这个高度可以改变）。当内容添加到 div 时，内容将增加高度。内容 div 将填充条带和页脚之间的 space。

Answer 2

我希望这就是您想要的:) 如果没有 width 或 right 设置，您的容器基本上将具有 0 宽度。 .strip 位于容器的开头，.footer 位于结尾。 .content 允许伸展，但如果没有 flex-grow 属性则不会比他的邻居伸展得更多，这决定了 flex 项目相对于 flex 中的其余 flex 项目将增长多少分发正空闲 space 时的容器。

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.strip {
  justify-self: flex-start;
  background: red;
  height: 5px;
}

.content {
  justify-self: stretch;
  background: blue;
  flex-grow: 1;
}

.footer {
  justify-self: flex-end;
  background: yellow
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

如何获得此布局（使用 CSS flexbox）？

How do I get this layout (using CSS flexbox)?

html

css

layout

vertical-alignment

flexbox