使用css定位--让foot层始终保持在页面底部

思路是将foot层绝对定位到底部，

蓝色字体为重要代码

 

贴代码：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <title>无标题文档</title>
 7 <style type="text/css">
 8 *{margin:0;padding:0;}
 9 html{height:100%;}
10 body{
11 min-height:100%;
12 _height:100%;
13 position:relative;
14 }
15 #head{background:#ccc;}
16 #content{padding-bottom:160px;}
17 #foot{position:absolute;bottom:0;height:100px;width:100%;overflow:hidden;background:#06F;}
18 </style>
19 </head>
20 <body>
21 <div id="head">
22     <h1>head</h1>
23 </div>
24 <div id="content">
25     <h1>content</h1>
26     <p>示例文字</p>
27     <p>示例文字</p>
28     <p>示例文字</p>
29     <p>示例文字</p>
30     <p>示例文字</p>
31     <p>示例文字</p>
32     <p>示例文字</p>
33 </div>
34 <div id="foot">foot</div>
35 </body>
36 
37 </html>

 

 

posted @ 2012-12-18 09:34  逆熵飞扬  阅读(707)  评论(0)  编辑  收藏  举报