高度 100% 在列 flexbox 祖先下不起作用 [重复]答案

【问题标题】：height 100% doesn't work under column flexbox ancestor [duplicate]高度 100% 在列 flexbox 祖先下不起作用 [重复]
【发布时间】：2022-08-18 16:39:33
【问题描述】：

.layout {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
}

.body {
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #a0a0a0;
}

.content {
  height: 100%;
  background-color: #c0c0c0;
}

<div class=\"layout\">
  Header
  <div class=\"body\">
    Body
    <div class=\"content\">
      Content
    </div>
  </div>
  Footer
</div>

为什么div.content 没有占据100% 的窗口？
有没有办法让div.content 在具有div.layout flexbox 的同时垂直跨越100%？
如果没有，我怎样才能在拥有这个 header-body-footer 结构的同时实现它？

编辑 1

div.body 应遵循默认显示属性。我不能让它成为 flexbox。

百分比高度不适用于最小高度。它需要确定的父身高才能起作用。
div.body 应该遵循默认的显示属性。我不能让它成为 flexbox。--> 那么你想要的是不可能的
最简单的解决方案是在 body 元素上使用 display: grid; grid-auto-rows: auto 1fr;

标签： css

【解决方案1】：

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body {
    flex-grow: 1;
    flex-shrink: 0;
    background-color: #a0a0a0;
    display: flex;
    flex-direction: column;
}

.content {
    height: 100%;
    background-color: #c0c0c0;
    flex-grow: 1;
    flex-shrink: 0;
}

<div class="layout">
  Header
  <div class="body">
    Body
    <div class="content">
      Content
    </div>
  </div>
  Footer
</div>

【讨论】：

这行得通，但我忘了提到我不能自定义 div.layout 或 div.body 以拥有任何其他显示属性。

【解决方案2】：

.layout {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

编辑 div.layout 代码 -> min-height 改变高度

【讨论】：