网上很多方法是使用 margin-bottom:-3000px; padding-bottom:3000px;的方式实现,可是我用着有问题,后来发现下面这种很简单的方法
由于父元素的高度为auto,因此子元素直接使用height:100%时是无法起作用的,但是对右边元素使用绝对定位时即可实现
<style>
.wrap{
width: 100%;
height: auto;
background-color: aquamarine;
display: flex;
position: relative;
}
.left{
width: 50%;
height: 50px;
background-color: aqua;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: bisque;
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
效果如下: