Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Fixed Sticky Footer with CSS
To create a fixed footer with CSS, we will use CSS position property. A fixed footer means that the footer will remain fixed at the bottom irrespective of the page scrolling. We will be discussing two different approaches to achieve this.
In this article, we are having some written content in a box and a footer. Our task is to create a fixed footer with CSS.
Approaches to Create a Fixed Footer
Here is a list of approaches to create a fixed footer with CSS which we will be discussing in this article with stepwise explanation and complete example codes.
Using Position sticky Property
To create a fixed footer with CSS, we have used CSS position property. The sticky property value keeps the footer fixed at the specified position.
- We have used two div elements, where one div element contains the body of document and the other div contains the footer of the web page.
- Then we have used CSS properties to apply styles to both document body and footer. We have set the background color and text color using background-color and color property. We have used bottom property to specify the position.
- Then we have set the height of document and width of the footer, font-size and font-family of the document.
- At the end we have used position: sticky; to fix the position of footer.
Example
Here is a complete example code implementing above mentioned steps to create a fixed footer with CSS using sticky property value.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Creating a fixed footer with CSS
</title>
<style>
.text {
height: 100vh;
color: white;
background-color: #031926;
font-family: Verdana, sans-serif;
}
.footer {
font-size: 20px;
padding: 2px;
position: sticky;
font-family: Verdana, sans-serif;
bottom: 0;
width: 100%;
background-color: #04af2f;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>
Creating a fixed footer with CSS
</h2>
<p>
In this example we have used position
<strong>sticky</strong> property value
to create a fixed footer with CSS.
</p>
<div class="text">
Welcome to Tutorials point.
</div>
<div class="footer">
<p>This is a fixed footer.</p>
</div>
</body>
</html>
Output
Here is the output of the above code.
Using Position fixed Property
In this approach to create a fixed footer with CSS, we have used CSS position property. The fixed property value keeps the footer fixed at the specified position.
- We have used two div elements, where one div element contains the body of document and the other div contains the footer of the web page.
- Then we have used CSS properties to apply styles to both document body and footer. We have set the background color and text color using background-color and color. We have used bottom property to specify the position.
- Then we have set the height of document and width of the footer, font-size and font-family of the document.
- At the end we have used position: fixed; to fix the position of footer.
Example
Here is a complete example code implementing above mentioned steps to create a fixed footer with CSS using fixed property value.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Creating a fixed footer with CSS
</title>
<style>
.text {
height: 100vh;
color: white;
background-color: #031926;
font-family: Verdana, sans-serif;
}
.footer {
font-size: 20px;
padding: 2px;
position: fixed;
font-family: Verdana, sans-serif;
bottom: 0;
width: 100%;
background-color: #04af2f;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>
Creating a fixed footer with CSS
</h2>
<p>
In this example we have used position
<strong>fixed</strong> property value
to create a fixed footer with CSS.
</p>
<div class="text">
Welcome to Tutorials point.
</div>
<div class="footer">
<p>This is a fixed footer.</p>
</div>
</body>
</html>
Output
Here is the output of the above code.
Conclusion
In this article, to create a fixed footer with CSS we have used two different methods. These methods are by using CSS position sticky property value and fixed property value. Both the methods can be used to achieve the desired result.
677 Views
