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

公司项目要求做这么个效果，查阅资料后基于Y_mmmmmmm的博客改成自己需要的样子，已经实现。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