首先考虑外层设置一个容器DIV,id设为#container,使他的高度为浏览器窗口的高度,然后将#footer这个DIV设置为#container的子DIV,并使用绝对定位的方式,使他固定到#container的底端,以实现希望的把DIV固定在网页底部效果。
例1
基于jquery
代码如下 | 复制代码 |
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动条下拉DIV固定在头部不动</title> <script type="text/javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"></script> <style> *{padding:0;margin:0;} .ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;} .bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;} .pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;} /*---------------------漂浮导航---------------------------*/ </head> <body> |
例2
CSS+DIV固定位置,不随滚动条而滚动
代码如下 | 复制代码 |
CSS部分: <style type="text/css"> DIV部分: <div class="fixed_div">I'm still here!</div> |