<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0
}
body{
/*overflow:hidden;*/
}
#container{
margin-top: 50px;
}
#header{
height: 50px;
100%;
background-color:red;
position: fixed;
color: blue;
top: 0;
text-align: center;
}
#footer{
height: 50px;
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>