html tutorial - How to create fixed header or footer using CSS - html5 - html code - html form
Answer: Use CSS fixed positioning
You can simply produce sticky or fixed header and footer victimization the CSS fixed positioning. simply apply the CSS position property with the worth fixed together with the highest and bottom property to position the element on the highest or bottom of the viewport consequently.
Example
<!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: 70px;
padding-bottom: 50px;
}
.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: 90%;
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 © 2017 Your Company</div>
</div>
</body>
</html>