First consider the outer setting of a container div,id set to #container, so that his height is the height of the browser window, and then the #footer Div is set to the #container of the child Div, and use the absolute positioning of the way, so that he fixed to the bottom of the #container, To achieve the desired div fixed at the bottom of the page effect.
Example 1
Based on jquery
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8 "/>
<title> scroll bar dropdown div fixed on head </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; * *---------------------Floating navigation---------------------------
html{_background-image:url (About:blank); _background-attachment:fixed;/** prevent IE6 jitter **/}
. float{position:fixed; z-index:999999; top:0px;}
* HTML. float{position:absolute; _top:expression (documentelement.scrolltop-0);}
</style> <body>
<div class= "AB" > First edition </div>
<div class= "PF" > Floating content </div>
<script type= "Text/javascript" >
Window.onscroll=function () {
if ($ (document). ScrollTop () > 250)
{
$ ("#pf_nav"). Show ();
$ (". PF"). addclass (' float ');
}else{
$ ("#pf_nav"). Hide ();
$ (". PF"). Removeclass (' float ');
}
}
</script>
<div class= "BC" >
<p>
<script language= "JavaScript" >
for (i=0;i<50;i++) {
document.write (i+ "<br/>");
}
</script>
</p>
</div>
</body>
|
Example 2
Css+div fixed position and does not scroll with scroll bar
| code is as follows |
copy code |
| CSS section: <style type=" text/css "
html,body{Overflow:hidden; margin:0px; width:100%; height:100%;
. virtual_body{width:100%; height:100%; overflow-y:scroll; overflow-x:auto;}
. Fixed_div{position:absolute; z-index:2009; bottom:0px; left:5%; width:88%; height:30px; border:1px solid red; Background: #e5e5e5;}
</style> Div section: <div class= "Fixed_div" >i ' m still here!</div>
<div class= "Virtual_body"
<!--body
<div style= "height:1000px width:500px background: #ccc" >CONTENTS</DIV>
<!--body
</div><!--End virtual_body |
