<div class="box">
<div class="top">top</div>
<div class="mid">mid</div>
<div class="btm">btm</div>
</div>css
.box{
display: flex;
flex-direction: column;
height: 100vh;
}
.mid{
flex: 1;
background-color: -sharpffc;
} the effect is as follows
but if you go to the IE browser, the yellow height in the middle becomes 0? Why? How should I change it? In order to make the middle part automatically increase the height when the content exceeds, and when the content is not enough, it will be covered with a screen (plus head and feet)