前端基础学习之零碎小点-父级容器高度不设置的情况下，子级高度百分百继承父级高度

在写一个步骤条的时候，发现用一个继承父级高度的子级的border就可以搞定。

此时父级高度并没有设置，即此时父级的高度是由子级容器的高度决定的，而如果这个时候单单给子级设置个height:100%,并不会起作用。父级的高度依赖于子级容器，子级又想继承父级的高度，两相矛盾。

解决方案：

• 第一步：给父级容器设置定位（relative、absolute、fixed都可）以作为子级的参照容器；
• 第二步：给子级容器一个绝对定位 （这样的子级其实已经脱离了文档流，父级的高度不依赖于脱标的子级，且此时父级是子级的参照容器，脱标的子级依赖父级，而父级的高度不依赖于子级）；

实例：不设父级高度，给一个子级容器（child-last）设置高度300px,另一个子级（child-first）设置高度80%，如果不脱标，child-first的高度为0，设置绝对定位后，高度为240px，即父级当前高度的百分之八十。

<div class="parent">
    <div class="child-first"></div>
    <div class="child-last"></div>
</div>

       .parent{
           width: 300px;
           background: pink;
           position: relative;
       }
       .child-first{
           position: absolute;
           width: 100px;
           height: 80%;
           background: #39BE93;
       }
        .child-last{
         	width: 70%;
            height: 300px;
            background: skyblue;
        }