当父div的高度为动态时,可以使用CSS的flexbox布局来实现子div的垂直拉伸以填充父div。
首先,需要将父div设置为一个flex容器,可以通过设置父div的display属性为flex来实现:
.parent {
display: flex;
}
然后,将子div设置为一个flex项,并且使用flex属性来控制子div的拉伸比例,使其垂直填充父div。可以将子div的flex属性设置为1,表示子div会占据剩余的空间:
.child {
flex: 1;
}
完整的HTML和CSS代码如下:
<div class="parent">
<div class="child"></div>
</div>
.parent {
display: flex;
}
.child {
flex: 1;
}
这样,无论父div的高度如何变化,子div都会自动垂直拉伸以填充父div的剩余空间。
领取专属 10元无门槛券
手把手带您无忧上云