html - 未指定高度的父项中的百分比高度

Question

我有一个非常简单的 HTML 和 CSS:

html,
body {
  min-height: 100%;
  margin: 0;
  paddding: 0;
}

.container {
  background: grey;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inner-container {
  background: red;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.box-1 {
  background: blue;
  margin-bottom: 10px;
  height: 150px;
}

.box-2 {
  background: green;
  min-height: 50%;
}

<div class="container">
  <div>HEADER</div>
  <div class="inner-container">
    <section class="box-1">
    </section>
    <section class="box-2">
    </section>
  </div>
  <div>FOOTER</div>
</div>

这是一个 CodePen:https://codepen.io/Loreno/pen/VNZeGw

如您所见，“box-2”层次结构中没有指定高度的元素。因此，box-2 的“最小高度:50%”不起作用 - 高度仅为 0。

如何解决这个问题并获得最小高度行为？

Answer 1

只需添加编辑容器 css 代码 - 而不是 height: 100% 使用 height: 100vw;

简短说明:

vh(viewport height(vw is viewport width))指的是DEVICE HEIGHT(如果你想让div填充DEVICE WIDTH的50%，你可以只用min -高度:50vw)。

% 指的是 PARENT。如果你写 width: 50%，div 将填充 PARENT 的 50%。

html,
body {
  min-height: 100%;
  margin: 0;
  paddding: 0;
}

.container {
  background: grey;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.inner-container {
  background: red;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.box-1 {
  background: blue;
  margin-bottom: 10px;
  height: 150px;
}

.box-2 {
  background: green;
  min-height: 50%;
}

<div class="container">
  <div>HEADER</div>
  <div class="inner-container">
    <section class="box-1">
    </section>
    <section class="box-2">
    </section>
  </div>
  <div>FOOTER</div>
</div>