项目中需要实现div一直显示在屏幕的底部,不管页面有多长或者多端都需要满足。
在网上找的用js实现的,移动时会闪动,效果不是特别好。也可能是没找到好的。
相比js,我更希望使用css实现 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 3 <head> 4 <style type="text/css">
5 html,body { 6 width:100%; 7 height:100%; 8 margin:0px; 9 padding:0px; 10 overflow:hidden; 11 } 12 #Main { 13 position:absolute; 14 bottom:0px; 15 left:0px; 16 width:100%; 17 height:100%; 18 overflow:auto; 19 z-index:1; 20 } 21 #ToolBar { 22 position:absolute; 23 bottom:0px; 25 width:100%; 26 height:auto; 27 text-align:center; 28 background:#ccc; 29 z-index:2; 30 overflow:hidden; 31 }
33 </style> 34 </head> 35 <body> 36 <div id="ToolBar">固定在页面底部不动</div> 37 <div id="Main" > 38 <div class="clear" style="height:2000px;background:#ff0;"> 我是内容,我足够大吧 </div> 39 </div></body> 40 </html>
原文:http://www.cnblogs.com/whroid/p/3588090.html