未指定高度的父级中的百分比高度

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代码-代替高度：100％使用高度：100vw;

简短说明：

vh（视口高度（vw是视口宽度））是指设备高度（如果要使div填充 DEVICE WIDTH 的50％，则可以使用min -高度：50vw）。

％是指父母。如果您输入宽度：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>