html如何让页面分界,Css用DIV页面布局（按照比例划分)宽高如何设置？

噜噜哒

.flexBox {

display: -webkit-flex;

display: flex;

height: 400px;

-webkit-flex-direction: column;

flex-direction: column;

}

.topBox {

position: relative;

-webkit-flex: 0 0 20%;

flex: 0 0 20%;

}

.topFlexBox {

position: absolute;

display: -webkit-flex;

display: flex;

width: 100%;

height: 100%;

background-color: #000;

}

.first {

-webkit-flex: 0 0 20%;

flex: 0 0 20%;

background-color: #3781B5;

}

.secondBox {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

height: 100%;

-webkit-flex: 0 0 80%;

flex: 0 0 80%;

}

.second {

-webkit-flex: 0 0 50%;

flex: 0 0 50%;

background-color: #13C723;

}

.third {

-webkit-flex: 0 0 50%;

flex: 0 0 50%;

background-color: #E33728;

}

.fourth {

-webkit-flex: 0 0 60%;

flex: 0 0 60%;

background-color: #E3E13B;

}

.fifth {

-webkit-flex: 0 0 20%;

flex: 0 0 20%;

background-color: #9DE3CC;

}

codePen修改了一下&＃xff0c;chrome、搜狗、iPhone都可以正常显示了