实现上中下布局，要求头部和底部分别固定在上下两端，中间区域内容超出时可以滚动

实现上中下布局，要求头部和底部分别固定在上下两端，中间区域内容超出时可以滚动

HTML部分

<div class="box">
   <div class="header">
       我是头部区域
   </div>
   <div class="content">
       <div class="contenItem" >
       	我是中间部分
       </div>
   </div>
   <div class="footer" >
      我是底部区域
   </div>
</div>

CSS部分

.header,.footer{
   width: 100%;
   height: 100px;
   line-height: 100px;
   background-color: red;
}
.content{
    width: 100%;
    position: absolute;
    top: 100px;
    bottom:100px;
    background-color: yellow;
}
.content{
  width: 100%;
  position: absolute;
  top: 100px;
  bottom:100px;
  background-color: yellow;
}
.footer{
    position: absolute;
    bottom: 0px;
}
//重点来了
.contentItem{
	overflow-y:auto;
	height:100%;
}