没有指定高度的父级百分比高度

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的“min-height：50％”不起作用 - 高度仅为0。

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

Answer 1

只需添加编辑容器css代码 - 而不是高度：100％使用高度：100vw;

短explenation;

vh（视口高度（vw是视口宽度））指的是DEVICE HEIGHT（如果你想让div填充50％DEVICE WIDTH，你可以使用min-height：50vw）。

％指的是父母。如果你写宽度：50％，div将填充父母的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>