How to Implement Fixed Footer CSS in Your Website

Fixed Footer CSS

This is another CSS tutorial that is 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 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.

HTML

<section>
  
This is some body text
<section>  

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

</section></section>

CSS Code

#footer {
   position: fixed;
   left: 0px;
   bottom: 0px;
   width:100%;
   height: 60px;
   background:green;
}
Read Also  How to Fix SameSite Attribute Warning in Google Chrome