html页面 头部、尾部固定 中间可拖动效果

Html模板：

<div class='header'></div> 
<div class='middle_outer'> 
    <div class='middle_inner'></div> 
</div> 
<div class='footer'></div> 

CSS样式：

.header {
    position: absolute;
    top: 0px;
    height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
    width: 100%; /*宽度是必要，如果没有宽度就无法撑出div*/
}
 
 
.middle_outer {
    position: absolute !important;
    position: relative;
    top: 66px !important; /*header部分的高度*/
    top: 0;
    bottom: 55px; /*footer部分的高度*/
    width: 100%;
    overflow: hidden; /*外层div不滚动，而是内层div滚动，实现自适应*/
    height: auto !important;
    height: 100%;
}
 
 
.middle_inner {
    height: 100%;
    overflow-y: auto; /*当内容超出后，就会出现滚动条*/
}
 
 
.footer {
    position: absolute;
    bottom: 0px;
    height: auto; /*高度可以不写，可以通过内部元素撑开，但是需要考虑是否会与自适应部分发生重合*/
    width: 100%; /*宽度是必要，如果没有宽度就无法撑出div*/
}
 
 

参考博客：http://blog.csdn.net/y_mmmmmmm/article/details/51233813