項目中需要實現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>