How to Create Fixed Footer / Sticky Footer
Updated on April 07, 2016
Have you ever experienced your blog footer to rise to the top of your blog page when it contains little content or even empty? For that, I now want to share tips and tricks on making footers are under even though the content is empty.
Author: Adhy Suriady
To be clear, can see the demo: Demo on JSFiddle
Want to make your footer silent below as the demo? Consider the following explanation:
To be clear, can see the demo: Demo on JSFiddle
Want to make your footer silent below as the demo? Consider the following explanation:
Easy Tricks to Make Sticky Footer
Firstly, we would understand the key to this trick
Understanding position:absolute
Do you ever use element CSS position:absolute? Well CSS element serves to make the objects have a free position relative to the parent (parent) that uses elements of CSS position:relative. Well this is what we will manipulate to create a sticky footer.
Started Manipulation
We want our footer is at the bottom of the page instead? Well for that we have to make a benchmark where the bottom of our website by adding attributes CSS position: relative, now these elements certainly are elements outermost website / blog is the html element (<html>) and make the footer of our website move freely by adding position:absolute and bottom:0, left:0, and right:0, to make under and has a full width. To that, add the following CSS, store above </b:skin> or </style>:
html {
position: relative;
min-height: 100%
}
#footer-wrapper, footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}
Now check to see your blog, whether footer been under? Definitely the answer is yes, but on pages with lots of content, footer cover part of the page content, well for that, we must make the footer has a fixed height (height:) CSS elements specified in order to provide a benchmark within the page element with a margin-bottom: , to that add the following CSS CSS replaces earlier:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 200px; /*Samakan dengan tinggi footer*/
}
#footer-wrapper, footer {
height: 200px; /* Ubah denga tinggi footer yang diinginkan */
position: absolute;
bottom: 0;
left:0;
right:0;
}
Well, you simply adjust the height according to the footer you want, and so much from me, there are difficulties? Do not hesitate to ask questions via the comments.