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


Styling web pages footer used to be one of the most annoying task in the website design process.


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