How to create fixed header or footer using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use CSS fixed positioning

You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Implement Sticky Header and Footer with CSS</title>
  • <style type="text/css">
  •     /* Add some padding on document's body to prevent the content
  •     to go underneath the header and footer */
  •     body{        
  •         padding-top: 60px;
  •         padding-bottom: 40px;
  •     }
  •     .fixed-header, .fixed-footer{
  •         width: 100%;
  •         position: fixed;        
  •         background: #333;
  •         padding: 10px 0;
  •         color: #fff;
  •     }
  •     .fixed-header{
  •         top: 0;
  •     }
  •     .fixed-footer{
  •         bottom: 0;
  •     }
  •     .container{
  •         width: 80%;
  •         margin: 0 auto; /* Center the DIV horizontally */
  •     }
  •     nav a{
  •         color: #fff;
  •         text-decoration: none;
  •         padding: 7px 25px;
  •         display: inline-block;
  •     }
  • </style>
  • </head>
  • <body>
  •     <div class="fixed-header">
  •         <div class="container">
  •             <nav>
  •                 <a href="#">Home</a>
  •                 <a href="#">About</a>
  •                 <a href="#">Products</a>
  •                 <a href="#">Services</a>
  •                 <a href="#">Contact Us</a>
  •             </nav>
  •         </div>
  •     </div>
  •     <div class="container">
  •         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  •     </div>    
  •     <div class="fixed-footer">
  •         <div class="container">Copyright &copy; 2016 Your Company</div>        
  •     </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.