把一个页面一份成2部分,上面的表单不是固定的,所以不能设置固定盖度,但是下面还需要填充满。我碰到的问题是下面没有填充满,出来补个div白色背景这与我想要的效果不一样
弹性盒的功能很强大,思路就是一个大盒子包含2个小盒子,给大盒子设置成弹性盒,然后给上半部分用flex-shrink,下面用flex-grow就解决啦~~~
上代码,哈哈哈哈
/* 外面盒子 */
.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;
}