How to create fixed header or footer using CSS
Topic: HTML / CSSPrev|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.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implement Sticky Header and Footer with CSS</title>
<style>
/* 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 © 2016 Your Company</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
