当先锋百科网

首页 1 2 3 4 5 6 7

      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