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

Question

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

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

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

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

我已经尝试过以下事情：

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

以上尝试均无效，列从未填充父项的高度。

标签： htmlcssflexboxcss-grid

Answer 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>