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