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 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 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 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 100%; 8 height: 20px; 9 text-align: center; 10 background: #ccc; 11 z-index: 2; 12 overflow: hidden; 13 } 14 </style>