页头页尾固定，中间滚动的实现 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		margin: 0;padding: 0
	}
	body{
		 /*overflow:hidden;*/
	}
	#container{
        margin-top: 50px;
	}
	#header{
		height: 50px;
		width: 100%;
		background-color:red;
		position: fixed;
		color: blue;
		top: 0;
		text-align: center;
	}
	#footer{
		height: 50px;
		width: 100%;
		background-color:gray;
		position: fixed;
		bottom: 0;
		color: blue;
		text-align: center;
	}
	#content{
		height: 820px;/*这个高度设置是关键*/
		overflow-y:scroll;/*显示滚动条*/
	}
	</style>
</head>
<body>
<div id="container">
	<div id="header">
		header
	</div>
	<div id="content">
		<p>headerheaderheaderheaderheaderheaderheader</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>11111</p>
		<p>footerfooterfooterfooterfooter</p>
	</div>
	<div id="footer">
		footer
	</div>
</div>
</body>
</html>

　　

posted on 2016-07-22 15:12  大龄书童  阅读(898)  评论(0)    收藏  举报

导航