CSS Fixed Footer Support All Browser

CSS Fixed Footer Support All Browser

Fixed footer can play important role of any website. We show our copyright text in footer and sometimes also show sponsor advertisement in footer section. If we make our footer fixed then visitors can see footer content while they scrolling page details. I’ve tested following snippet in all major web browsers including mobile browsers and it’s working great. So, today we are going to build a fixed footer with simple CSS code. I’ve also added demo URL in below.

– CSS Snippet For Fixed Footer:

body { 

footer#fixed-footer {
  color: black;
  border-top: 1px solid #000000;
  background-color: white;
  text-align: center;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 2em;
  text-align: center; 
  color: #000000; 
  font-size: 18px;

– HTML Snippet For Fixed Footer:

<p>Resize your web browser to check footer position.</p>
<footer id="fixed-footer">
  Copyright &copy; http://www.demo.com 2012


Enjoy! Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Total 0 Votes

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Comment

Back To Top