1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>page01</title>
5 <style type="text/css">
6 .container{position:relative;width:100%;min-height:100%;}
7 .header{padding-bottom:10%;width:100%;position: fixed;background-color:blue;top:0px;left:0px;}
8 .main{position: fixed;width: 100%;height: 80%;background-color: green;top:10%;left:0px;}
9 .footer{height:10%;width:100%;position:fixed;bottom:0px;left:0px;background-color: yellow;}
10 </style>
11 </head>
12 <body>
13
14 <div class="container">
15 <div class="header">header</div>
16 <div class="main">main</div>
17 <div class="footer">footer</div>
18 </div>
19 </body>
20 </html>
效果图如下：（header固定在顶部，footer固定在底部）
