html,body{height:100%}
.wraper{
display:flex;
flex-direction:column;
height:100%;
flex-wrap: nowrap;
}
div{
border:1px solid red;
}
.top{
height:20px;
}
.mid{
border:1px solid green;
flex:1;
}
.bottom{
height:20px;
}
<div class="wraper"> <div class="top"></div> <div class="mid"></div> <div class="bottom"></div> </div>
原文：http://www.cnblogs.com/zyip/p/5727651.html