首页 > 其他 > 详细

div固定在屏幕底部

时间:2014-03-08 16:16:03      阅读:602      评论:0      收藏:0      [点我收藏+]

 

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

bubuko.com,布布扣
 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>
bubuko.com,布布扣

div固定在屏幕底部,布布扣,bubuko.com

div固定在屏幕底部

原文:http://www.cnblogs.com/whroid/p/3588090.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!