一个div块固定在页面底部不动

最新推荐文章于 2023-06-23 18:37:14 发布

weixin_30666753

最新推荐文章于 2023-06-23 18:37:14 发布

阅读量600

点赞数 1

文章标签： php javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/liuyu7177/archive/2013/05/03/3056278.html

版权

View Code

  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         {
  7             width: 100%;
  8             height: 100%;
  9             margin: 0px;
 10             padding: 0px;
 11             overflow: hidden;
 12         }
 13 
 14         #Main
 15         {
 16             position: absolute;
 17             bottom: 0px;
 18             left: 0px;
 19             width: 100%;
 20             height: 100%;
 21             overflow: auto;
 22             z-index: 1;
 23         }
 24 
 25         #ToolBar
 26         {
 27             position: absolute;
 28             bottom: 0px;
 29             right: 16px;
 30             width: 100%;
 31             height: 20px;
 32             text-align: center;
 33             background: #ccc;
 34             z-index: 2;
 35             overflow: hidden;
 36         }
 37     </style>
 38 </head>
 39 <body>
 40     <div id="ToolBar">固定在页面底部不动</div>
 41     <div id="Main">
 42         <p><strong>09即将流行的经典语录</strong></p>
 43         <div class="clear"></div>
 44         <div class="info clearfix">
 45             <p class="date"></p>
 46         </div>
 47         <div class="blog_content" id="blog_content">
 48             TOP1
 49             <br />
 50             人生的最大遗憾莫过于错误地坚持了不该坚持的，轻易地放弃了不该放弃的……
 51             <br />
 52             TOP2
 53             <br />
 54             新式morning call——生前何必久睡，死后自会长眠.
 55             <br />
 56             TOP3
 57             <br />
 58             使你疲劳的不是远方的高山，而且是你鞋里面的一粒砂子.
 59             <br />
 60             TOP4
 61             <br />
 62             有时在饭堂排队打饭时最大的欣慰不是前面的人越来越少而是后面等的人越来越多.
 63             <br />
 64             TOP5
 65             <br />
 66             逆风的方向，更适合飞翔。我不怕万人阻挡，只怕自己投降.
 67             <br />
 68             TOP6
 69             <br />
 70             酒，装在瓶里像水，喝到肚里闹鬼，说起话来走嘴，走起路来闪腿，半夜起来找水，早上起来后悔，中午酒杯一端还是挺美。
 71             <br />
 72             TOP7
 73             <br />
 74             你要不理我我就成包子了…而且还是天津最有名的…嘿嘿…
 75             <br />
 76             TOP8
 77             <br />
 78             妈妈说人最好不要错过两样东西，最后一班回家的车和一个深爱你的人.
 79             <br />
 80             TOP9
 81             <br />
 82             我问一个在深圳工作了二十年的朋友：“如果你死后，你的墓志铭打算写点啥？”他说：“我解决了住房问题！”
 83             <br />
 84             TOP10
 85             <br />
 86             那天看到一位大妈在烧纸，边烧边嘟囔着：收到了全都买基金吧~~ TOP11
 87             <br />
 88             学问之美，在于使人一头雾水；诗歌之美，在于煽动男女出轨；女人之美，在于蠢得无怨无悔；男人之美，在于说谎说得白日见鬼.
 89             <br />
 90             TOP12
 91             <br />
 92             如果你看到面前的阴影，别怕，那是因为你的背后有阳光.
 93             <br />
 94             TOP13
 95             <br />
 96             诸葛亮出山前，也没带过兵!凭啥我就要工作经验？
 97             <br />
 98             TOP14
 99             <br />
100             本人made in china，出厂日期1981年X月X日，长180cm，净重67kg。采用人工智能，各部分零件齐全，运转稳定，经二十多年的运行，属信得过产品。该产品手续齐全，无限期包退包换。现因发展需要，诚招志同道合者共同研制开发第二代产品，有意者请联系！
101             <br />
102             TOP15
103             <br />
104             干掉熊猫，我就是国宝！
105             <br />
106             TOP16
107             <br />
108             我能容忍身材是假的，脸是假的，胸是假的，臀是假的！！！但就是不容忍钱是假的！！！！
109             <br />
110             TOP17
111             <br />
112             脱机的人永远不知道联机的人等了她多久……
113             <br />
114             TOP18
115             <br />
116             还能冲动，表示你还对生活有激情，总是冲动，表示你还不懂生活.
117             <br />
118             TOP19
119             <br />
120             命运负责洗牌，但是玩牌的是我们自己！
121             <br />
122             TOP20
123             <br />
124             问世间情为何物，不过一物降一物～
125             <br />
126             TOP21
127             <br />
128             如果中了一千万，我就去买30套房子租给别人，每天都去收一次房租。哇咔咔~~充实!
129             <br />
130             TOP22
131             <br />
132             上帝欲使人灭亡，必先使其疯狂；上帝欲使人疯狂，必先使其买房.
133             <br />
134             TOP23
135             <br />
136             我们走得太快，灵魂都跟不上了……
137             <br />
138             TOP24
139             <br />
140             问：你喜欢我哪一点？答：我喜欢你离我远一点！
141             <br />
142             TOP25
143             <br />
144             你看得见我打在屏幕上的字，却看不到我掉在键盘上的泪
145         </div>
146 </body>
147 </html>

重点：

1.一个id为“ToolBar”的div,<div id="ToolBar">固定在页面底部不动</div>.

2.设置他的CSS

 1 <style>
 2 #ToolBar
 3 {
 4 position: absolute;
 5 bottom: 0px;
 6 right: 16px;
 7 width: 100%;
 8 height: 20px;
 9 text-align: center;
10 background: #ccc;
11 z-index: 2;
12 overflow: hidden;
13 }
14 </style>