min-height 父级的子元素不尊重父级的 100% 高度答案

【问题标题】：Child elements of min-height parent is not respecting 100% height of parentmin-height 父级的子元素不尊重父级的 100% 高度
【发布时间】：2021-07-09 23:06:42
【问题描述】：

我正在尝试创建带有页眉和页脚的 2 列布局。我希望页面最初是全高（100vh），如果内容很长，可以扩展其高度。

这是一个 CodePen，显示了我正在尝试实现的部分目标： https://codepen.io/realslimsutton/pen/eYWzavw

上述 CodePen 的问题在于，它的高度固定为 100vh。如果我将容器的高度更改为 min-height: 100vh; 而不是 height: 100vh;，则 2 列会将它们的高度重置为 0。

可以在此 CodePen 中找到不适用于 min-height 集的示例：https://codepen.io/realslimsutton/pen/xxdONjO。

我已经尝试了以下方法：

height: 100%; 在.container .content 的所有子元素上
align-self: stretch; 在.container .content 的所有子元素上
align-items: stretch; 在.container .content 内的所有父元素上

上述尝试均无效，列从未填满父级的高度。

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

只改变了几件事。别忘了默认是display: block

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container > .header, .container > .footer {
  height: 10vh;
  width: 100%;
}

.container .header {
  background-color: rgb(239, 68, 68);
}

.container .footer {
  background-color: rgb(59, 130, 246);
}

.container .content {
  /*Line added since the default is block it wasn't working with 
   flex grow*/
  display: flex;
  flex-grow: 1;
}

.container .grid {
  /*Now that your content "grows" you can inherit its height*/
  height: inherit;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.container .grid > div {
  height: 100%;
  width: 100%;
}

.container .grid .left, .container .grid .right {
  height: 100%;
  width: 100%;
}

.container .grid .left {
  background: rgb(16,185,129);
}

.container .grid .right {
  background: rgb(139,92,246);
}

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="grid">
      <div>
        <div class="left">
        </div>
      </div>
      <div>
        <div class="right">
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</div>

【讨论】：

乐于帮助@Sutton