You are here: / Articles / Guides / Tips / Tutorials / How to Implement Fixed Footer CSS in Your Website

How to Implement Fixed Footer CSS in Your Website

Fixed Footer CSS

Share!



This is another CSS tutorial that is a straight to the point web design guide. Today we are looking at the fixed footer CSS implementation.

This basically has the effect of having a HTML section of the web page permanently fixed at the bottom of the web browser viewport whether one scrolls or not.

The same technique can be applied to the header of the page or any other section for that matter. These CSS rules shown here generally work in all browsers except some legacy browsers such as ie6 which require a hack to achieve. We will not take the older browsers to heart.

Sample Code for Fixed Footer CSS

See the Pen Fixed Footer Sample by Steve Obbayi (@sobbayi) on CodePen.

Read Also  How Internet Domain Names Work