父盒子min-height属性子盒子100%没有高度

问题

​     同事写一个loading组件，但是设置高度的时候，在父盒子设置最min-height，设置子盒子高度100%；但是发现子盒子的高度和父盒子的高度并不相等(子盒子没有像预想中那样获取父盒子的高度)；导致页面就出了问题；

看到这就大概想到了问题的所在；min-height属性设置后，虽然父盒子存在高度（检查element，height不为0），但是对子盒子而言，却没有办法通过100%继承高度的。（可以理解为父盒子是没有height的）；

解决办法

​     既然知道了问题所在，那么就好解决了；首先用个简单的办法，既然同事是想做一个loading组件，那么他的高度自然是想获取全屏高度，那么使用css直接设置高度(height: 100vh)就可以了；或者根据需求，例如同事这里的最小高度设置的是屏幕的高度，那么我们完全可以将父盒子设置为100vh，这并不影响他的功能，那么父盒子有了height属性之后，子盒子当然就可以使用height:100%来继承该高度了。

​     当然，如果你想要直接获取父元素高度，而不是简单的全屏高度，也是有办法的；下面直接提供两种解决方案，具体解析可以参考BFC的内容，BFC块会计算整个内容的高度。

使用flex解决方案：

.father {
      min-height: 300px;
      background-color: aquamarine;
      display: flex;
}

.child {
      height: inherit;
      width: 100%;
      background-color: coral;
}

使用position定位解决方案：

.father {
      width: 100%;
      min-height: 300px;
      background-color: aquamarine;
      position: relative;
 }
 .child {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: coral;
 }

    注：除上述通过min-height获得的高度，子元素不能通过100%继承使用外；还有另一种情况，同样不可以通过100%让子元素获取高度；如下，父盒子中存在两个子盒子，.father设置min-height或者不设置高度，.child-bor设置一个固定高度，此时，父盒子自然会被子元素撑开（此时父盒子的高度和.child-bro的高度相同）；这时候，如果在.child中使用height: 100%;同样是获取不到高度的；

  <div class="father">
    <div class="child"></div>
    <div class="child-bro"></div>
  </div>