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

it2022-05-05  105

思路是将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>

 

 

转载于:https://www.cnblogs.com/codelf/archive/2012/12/18/2822724.html


最新回复(0)