以下例子信息来自http://www.uecss.com/index.php/fixed-floating-imitation-navigation/
页面加入样式:
Code body {background-image:url(text.txt); /* for IE6 */background-attachment:fixed;}.bottomNav {background-color:#096;z-index:999;position:fixed;bottom:0;left:0;width:100%;_position:absolute; /* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */overflow:visible;}
将要显示的DIV加上
Code class="bottomNav"
下边这个是原创,也是纯CSS实现:
Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>悬浮窗口</title> <style type="text/css"> HTML { OVERFLOW: hidden; HEIGHT: 100%; } BODY { BACKGROUND:#999; MARGIN: 0px; OVERFLOW:auto; WIDTH: 100%; HEIGHT: 100%; } #flow_wbox { BACKGROUND:#333; DISPLAY: block; FLOAT: none; BOTTOM: 0px! important; POSITION: absolute; WIDTH: 100%; HEIGHT: 60px } </style></head><body> <div style="height: 1000px;"> abc </div> <div id="flow_wbox"> 这里是悬浮窗口!! </div></body></html>
转载于:https://www.cnblogs.com/KenBlove/archive/2009/06/30/1513796.html
相关资源：手机网页底部悬浮固定导航