How to make a sticky footer
How to make a sticky footer I tried on google found some results but didn't figure out exactly how it works, so I did some rough layouts to figure out that I have three divs #header , #container , #footer .
So, if I remove the #container and the footer shouldn't go anywhere, that should be stable at its permanent location.
explain in a simple way, everyone will be easy to understand ...
see my fiddle: - http://jsfiddle.net/dZDUR/5/
source to share
Give height: 100% before html, body
and main container
. When you give height:100%
in .container
, press " footer
", and after that we give the footer
margin
top than it height
. Like this:
html,body{
height:100%;
}
.header {
background:red;
width:500px;
height:100px;
}
.container {
background:yellow;
width:500px;
height:100%;
}
.footer {
background:green;
width:500px;
height:100px;
margin-top:-100px;
}
Html
<div class="container">
<div class="header">
</div>
</div>
<div class="footer">
</div>
Check it out http://jsfiddle.net/dZDUR/8/
source to share
http://jsfiddle.net/dZDUR/6/ gives the footer a value position: fixed
and you can position however you want. in this example with the top: 200px; so it will stay there even without #container
source to share
You can use absolute positioning via CSS. I am assuming that your footer and header are not nested within the container, since removing the container will then remove the footer. So, let's say you have this structure:
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
The footer should be set in absolute order (take it out of the stream) and the footer should be 0 - for example:
body {
position:relative;
}
.footer {
position: absolute; /* or position:fixed for scrolling */
bottom: 0;
}
you may or may not need to set position: relative to body (is this the default behavior?).
If the picture has scrolling, like the mention of QQping, use position: fixed instead of position: absolute (otherwise same code)
source to share