Divide a page into 2 parts. The above form is not fixed, so fixed coverage cannot be set, but the bottom still needs to be filled. The problem I ran into was that the bottom was not filled up, so I came out to make up a div with a white background, which was not the same as what I wanted.
The function of the flex box is very powerful. The idea is that a big box contains 2 small boxes, set the big box as an flex box, and then use flex-shrink for the upper part, and use flex-grow to solve it~~~
Upload the code, hahahaha
/* 外面盒子 */
.app{
height: calc(100vh - 50px);
display: flex; // 重点
flex-direction: column; // 重点
}
/* body上部 */
.app-top{
background-color: #F5F6FA;
flex-shrink: 0; // 重点
.app-inner{
padding: 2%;
background-color: #ffffff;
border-radius: 0 0 50px 0;
}
}
/* body下部 */
.app-bottom{
padding: 2%;
background-color: #F5F6FA;
border-radius: 50px 0 0 0;
flex-grow: 1; // 重点
display: flex;
flex-direction: column;
}