css页面布局实现，内容部分自适应屏幕，当内容高度小于浏览器窗口高度时，页脚在浏览器窗口底部；当内容高度高于浏览器窗口高度时，页脚自动被撑到页面底部。
css如下：
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6 }
7 html,
8 body {
9 width: 100%;
10 height: 100%;
11 }
12 .main {
13 overflow: hidden;
14 position: relative;
15 min-height: 100%;
16 background: #eee;
17 }
18 .red {
19 margin-bottom: 50px;
20 height: 200px;
21 background: #f00;
22 }
23 .footer {
24 position: absolute;
25 bottom: 0;
26 left: 0;
27 height: 50px;
28 width: 100%;
29 background: #0f0;
30 }
31 </style>
html如下：
1 <body>
2 <div class="main">
3 <div class="red"></div>
4 <div class="footer"></div>
5 </div>
6 </body>
通过改变red的高度，来模拟不同内容高度下，页脚的位置。
更多专业前端知识，请上 【猿2048】www.mk2048.com