absolute之整体布局实现

  

要实现如图的布局，我最先想到是将header与footer绝对定位，但是发现在移动端会出现bug，经查资料发现用absolute实现整体布局非常好，还挺简单的。

.header, .footer, .content { 
       position: absolute; 
       left: 0; 
       right: 0; 
}
.header {
     height: 48px; 
     top: 0; 
     z-index: 1; 
    /*other style*/  
}
.footer { 
     height: 52px; 
     bottom: 0;
     z-index: 1; 
     /*other style*/  
}
.content { 
     top: 48px; 
     bottom: 53px; 
     overflow: auto; 
    /*other style*/  
}