Friday, June 23, 2017
How to Style a Sticky Page Footer with CSS3
How to Style a Sticky Page Footer with CSS3
How to Style a Sticky Page Footer with CSS3
1.Make sure that all top and bottom margins of the footer inner elements are zero - or at least dont affect the whole footer bottom. The recommended is zero, though.
2.Give the footer a position which is "Absolute". Absolute position is telling the element to have a fixed place inside the page (not the screen) and it doesnt change whatever happens.
3.Until now, the element was told to stick in some place, but not where. So, we will add a bottom of zero, right of zero and left of zero. That will make the footer just stick to the bottom of the page.
4.Check your code.
- footer{position: absolute;bottom: 0;right:0;left:0;}
Available link for download