This paper introduces the method of using pure CSS to implement the fixed bottom effect. Some cases are a bit of a browser-compatibility effort. Not that much, look at the code section, and JavaScript is also based on CSS methods.
-
HTML section:
The code is as follows
<div id= "Wrap" >
<div id= "Header" >
</div>
<div id= "Main" >
</div>
</div>
<div id= "Footer" >
</div>css section:
HTML, body {height:100%;}
#wrap {min-height:100%;}
#main {overflow:auto;padding-bottom:150px}/* To be the same height as footer * *
#footer {position:relative;margin-top: -150px;height:150px;clear:both}
/*opera compatible */
Body:before {content: ""; height:100%;float:left;width:0;margin-top:-32767px;}
As you can see, the HTML section is the same as the first method, except for a header section. Note here that the headers for both methods need to be added to the first part. The other is the writing of CSS, written on the compatibility of opera, here is ashamed I did not study the first method of the compatibility of opera. Interested friends can delve into.
In addition, the author also wrote the Compatibility for IE:
The code is as follows
<!--[if! IE 7]>
<style type= "Text/css" >
#wrap {display:table;height:100%}
</style>
<! [endif]--> example does not have much to say
Look at another complete example
Code as follows
<style type= "text/css" rel= "stylesheet"
Html,body{padding:0;margin:0;overflow:auto;height : 100%;width:100%}
#wrapper {width:952px;margin:auto;display:block}
#presence {
bottom:0;
Display:block;
height:23px;
line-height:23px;
border:1px solid red;
width:950px;
z-index:100;
position:fixed!important;
>position:absolute;
margin:0 Auto;
}
#main {
height:100%
Overflow:auto;
&NBSP;&NBSP;&NBSP;&Nbsp; position:relative;
width:100%;
}
#content {
margin:0
min-height:100%;
padding:0;
position:relative;
border:1px solid blue;
height:3000px;
}
</style>
</head>
<body>
<div id= "wrappers"
<div id= "Presence" > here is the bottom </div>
<div id= "main"
<div id= "Content" > here are the contents </div>
</div>
</div>
</body>
</html>
to recommend a JavaScript implementation of
Code as follows
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "www.w3.org/1999/xhtml"
<head>
<title> Location-fixed toolbar </title>
< Meta http-equiv= "Content-type" content= "text/html;charset=gb2312"
<script language= "JavaScript"
/*
Change the display status of an object according to its current properties
*/
Function Onclickdiv (divid)
{
if (document.all[divid). style.display== ' None ')
{document.all[divid].style.display= ';}
Else
{document.all[divid].style.display= ' none ';}
return 0;
}
</script>
<style type= "Text/css" >
html,body {margin:0; padding:0; overflow:hidden; height:100%; width:100%; Text-align:left;
. body {position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
. Tools {position:absolute; z-index:100; margin:0 auto; bottom:10px; left:10px; width:400px; height:20px; border:1px solid Gray; Background: #f7f7f7; Text-align:left;
#dy2 {
position:absolute
height:100px
width:200px;
background-color: # 000066;
top: -100px;
z-index:2;
}
#dy1 {
height:25px
width:100px
border:1px solid #990000;
Background-color: #FF9900;
text-align:left;
}
</style>
</head>
<body>
<div class= "Tools"
<div id= "Dy2" style=display:none> hide </div>
<div id= "Dy1" style= Display onclick= "Return onclickdiv (' Dy2 ')" >LINKTALK</DIV>
</div>
<div class= "Body" >
<div style= "Height:1200px;background: #ffffff" ></DIV>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
