当父级的高度自适应的时候,一直找不到方法,设置子级元素和父级一样的高度。无意中发现,设置父级为flex,在需要跟随父级高度的子级外再加上一层div,设置子级的div height为100%,可以实现跟随父级高度。
例如下面这个例子。
父级(div3)的高度由div1撑开,想要div2高度自动设置为div3的高度,可以在div2外层加上一个div,然后设置div3的display为flex,div2的height设置为100%,这样就可以实现div2的高度和div3的高度一致了。
<body>
<div class="div3">
<div class="div1"></div>
<div>
<div class="div2"></div>
</div>
</div>
</body>
<style>
.div1 {
height: 300px;
width: 50px;
background-color: red;
display: inline-block;
}
.div2 {
width: 50px;
background-color: blue;
height: 100%;
display: inline-block;
}
.div3 {
display: flex;
}
</style>