如下图所示,
中间红色块儿需要根据手机屏幕大小自适应高度
css可这样写,黑色块儿上加flex-column,红色块上加flex-bottom
.flex-column {
height: 100% !important;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
overflow: hidden;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
width: 100%;
.flex-bottom {
box-sizing: border-box;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
position: relative;
z-index: 5;
overflow-x: hidden;
height: 100%;
overflow-y: auto;
}
}
至此,红色块儿部分会根据屏幕大小自适应高度
同样也适用于PC端