将一个页面固定在另一个页面的底部

最新推荐文章于 2021-06-03 08:49:28 发布

原创最新推荐文章于 2021-06-03 08:49:28 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#class #iframe #xhtml #html #div

js 代码专栏收录该内容

3 篇文章

订阅专栏

本文分享了一系列风趣幽默的经典语录，并介绍了两种将页面固定在底部的技术方案：一种是利用纯CSS实现，另一种结合了JavaScript进行动态定位。

将一个页面固定在另一个页面的底部有两种方式：

方法一：用div+css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; } #Main { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:auto; z-index:1; } #ToolBar { position:absolute; bottom:0px; right:16px; width:100%; height:50px; margin:0px; padding:0px; text-align:center; background:#ccc; z-index:2; overflow:hidden; }</style> </head> <body> <div id="ToolBar"><iframe src="http://www.baidu.com" height="50" width="100%" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" align="bottom"></iframe></div> <div id="Main"> <p><strong>09即将流行的经典语录</strong></p> <div class="clear"> </div> <div class="info clearfix"> <p class="date"> </p> </div> <div class="blog_content" id="blog_content">TOP1 <br /> 人生的最大遗憾莫过于错误地坚持了不该坚持的，轻易地放弃了不该放弃的…… <br /> TOP2 <br /> 新式morning call——生前何必久睡，死后自会长眠.　<br /> TOP3 <br /> 使你疲劳的不是远方的高山，而且是你鞋里面的一粒砂子. <br /> TOP4 <br /> 有时在饭堂排队打饭时最大的欣慰不是前面的人越来越少而是后面等的人越来越多. <br /> TOP5 <br /> 逆风的方向，更适合飞翔。我不怕万人阻挡，只怕自己投降. <br /> TOP6 <br /> 酒，装在瓶里像水，喝到肚里闹鬼，说起话来走嘴，走起路来闪腿，半夜起来找水，早上起来后悔，中午酒杯一端还是挺美。 <br /> TOP7 <br /> 你要不理我我就成包子了…而且还是天津最有名的…嘿嘿… <br /> TOP8 <br /> 妈妈说人最好不要错过两样东西，最后一班回家的车和一个深爱你的人. <br /> TOP9 <br /> 我问一个在深圳工作了二十年的朋友：“如果你死后，你的墓志铭打算写点啥？”他说：“我解决了住房问题！” <br /> TOP10 <br /> 那天看到一位大妈在烧纸，边烧边嘟囔着：收到了全都买基金吧~~ TOP11 <br /> 学问之美，在于使人一头雾水；诗歌之美，在于煽动男女出轨；女人之美，在于蠢得无怨无悔；男人之美，在于说谎说得白日见鬼. <br /> TOP12 <br /> 如果你看到面前的阴影，别怕，那是因为你的背后有阳光. <br /> TOP13 <br /> 诸葛亮出山前，也没带过兵!凭啥我就要工作经验？ <br /> TOP14 <br /> 本人made in china，出厂日期1981年X月X日，长180cm，净重67kg。采用人工智能，各部分零件齐全，运转稳定，经二十多年的运行，属信得过产品。该产品手续齐全，无限期包退包换。现因发展需要，诚招志同道合者共同研制开发第二代产品，有意者请联系！ <br /> TOP15 <br /> 干掉熊猫，我就是国宝！ <br /> TOP16 <br /> 我能容忍身材是假的，脸是假的，胸是假的，臀是假的！！！但就是不容忍钱是假的！！！！ <br /> TOP17 <br /> 脱机的人永远不知道联机的人等了她多久…… <br /> TOP18 <br /> 还能冲动，表示你还对生活有激情，总是冲动，表示你还不懂生活. <br /> TOP19 <br /> 命运负责洗牌，但是玩牌的是我们自己！ <br /> TOP20 <br /> 问世间情为何物，不过一物降一物～ <br /> TOP21 <br /> 如果中了一千万，我就去买30套房子租给别人，每天都去收一次房租。哇咔咔~~充实! <br /> TOP22 <br /> 上帝欲使人灭亡，必先使其疯狂；上帝欲使人疯狂，必先使其买房. <br /> TOP23 <br /> 我们走得太快，灵魂都跟不上了…… <br /> TOP24 <br /> 问：你喜欢我哪一点？答：我喜欢你离我远一点！ <br /> TOP25 <br /> 你看得见我打在屏幕上的字，却看不到我掉在键盘上的泪 </div></body> </html>

方法二：用div+css+js bottom.js

document.write("<div style='position:absolute;height:50px;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)'> "); document.write("<iframe src="http://www.baidu.com" mce_src="http://www.baidu.com" height=50 width=100% scrolling=no frameborder=0 marginheight=0 marginwidth=0 align='bottom'></iframe></div>");