How to Implement Fixed Footer CSS in Your Website

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 an HTML section of the web page permanently fixed at the bottom of the web browser viewport whether one scroll 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.

HTML

<section>
  
This is some body text

</section>  

<div id="footer">
  
 This is a fixed footer 

</div>

CSS Code

#footer {
   position: fixed;
   left: 0px;
   bottom: 0px;
   width:100%;
   height: 60px;
   background:green;
}

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.