盒子高度响应问题研究

< div class= "wrapper" >

< div class= "header" >

搜索条件

   < ul >

< li >1 </ li >

< li >2 </ li >

< li >3 </ li >

< li >4 </ li >

< li >5 </ li >

< li >6 </ li >

< li >7 </ li >

< li >8 </ li >

< li >9 </ li >

</ ul >

< div class= "MY" >中间工具比如新增按钮呢 </ div >

< div class= "container" >

   < ul >

< li >1 </ li >

< li >2 </ li >

< li >3 </ li >

< li >4 </ li >

< li >5 </ li >

< li >6 </ li >

< li >7 </ li >

< li >8 </ li >

< li >9 </ li >

</ ul >

</ div >

< div class= "MY" >分页组件等 </ div >

</ div >

< style >

.MY{

height: 100px;

background: blue;

}

.wrapper{

   display:-webkit-box;

-webkit-box-orient: vertical;

width: 100%;

height: 100%;

}

ul{

margin: 50px auto;

}

.test{

height: 100px;

margin-top: 10px;

padding: 20px;

background: red;

}

ul li{

width: 200px;

height: 40px;

font-size: 18px;

float: left;

}

.container{

   height: 0;

background: red;

overflow-y: auto;

-webkit-box-flex: 1;

}

< / style >