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