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

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；

简短的解释：

vh (viewport height (vw是viewport width))指的是最小设备高度填充(如果你想让填充50%的设备宽度，你可以只使用-height: 50vw)。

%表示父。如果你写的宽度: 50%，该将填充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>

​