div固定在屏幕底部


 

项目中需要实现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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM