在写一个步骤条的时候,发现用一个继承父级高度的子级的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;
}