如何设置弹性柱子到最大可用高度? [英] How to set flex column child to go full available height?

问题描述

考虑以下代码:

.container {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 1;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  height: 100%;
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

为什么我的CONTENT不能获得全部可用高度(从HEADER底部到页面底部)?怎么解决呢?

Why is my CONTENT not getting full available height (from HEADER bottom to the bottom of page) ? How to solve it ?

推荐答案

您的容器缺少高度，您可以使用height:100vh;填充窗口的高度.

Your container is missing an height , you can use height:100vh; to fill window's height.

您还可以使用％，但是您需要从父级继承一个有效值.在这种情况下，它可以从html提取，发送到正文，最后由您的容器使用:(

You can also use % , but you need to inherit a valid value from a parent. In this case, it can be take from html, send to body, and finally used by your container:(example in this duplicate)

html,body,.container {height:100%;}

带有vh的示例

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  /*or min-height*/      height: 100vh;
}

.header {
  /* flex: 1; not needed */
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  /*height: 100%; not needed */
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

这篇关于如何设置弹性柱子到最大可用高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！