Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a Fixed Footer with CSS?
To create a fixed footer with CSS, we will use the CSS position property. A fixed footer means that the footer will remain fixed at the bottom irrespective of page scrolling. We will be discussing two different approaches to achieve this.
Syntax
selector {
position: sticky | fixed;
bottom: 0;
width: 100%;
}
Method 1: Using Position Sticky Property
The position: sticky property keeps the footer at the bottom of the page when scrolling. The footer will stick to the bottom of the viewport when it reaches there −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Verdana, sans-serif;
}
.content {
height: 150vh;
background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
padding: 20px;
color: #333;
}
.footer {
position: sticky;
bottom: 0;
width: 100%;
background-color: #2196f3;
color: white;
text-align: center;
padding: 15px 0;
font-size: 18px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="content">
<h2>Main Content</h2>
<p>This is a long page with sticky footer. Scroll down to see the footer stick to the bottom.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Scroll down to see the sticky footer behavior...</p>
</div>
<div class="footer">
Sticky Footer - Sticks when scrolling
</div>
</body>
</html>
A page with light blue gradient content and a blue footer that sticks to the bottom of the viewport when scrolling down.
Method 2: Using Position Fixed Property
The position: fixed property keeps the footer permanently fixed at the bottom of the viewport, regardless of content length −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Verdana, sans-serif;
padding-bottom: 60px; /* Prevent content overlap */
}
.content {
height: 200vh;
background: linear-gradient(to bottom, #fff3e0, #ffcc02);
padding: 20px;
color: #333;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ff9800;
color: white;
text-align: center;
padding: 15px 0;
font-size: 18px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
z-index: 1000;
}
</style>
</head>
<body>
<div class="content">
<h2>Main Content</h2>
<p>This page demonstrates a fixed footer that always stays at the bottom of the screen.</p>
<p>The footer remains visible even when scrolling through long content.</p>
<p>Notice the padding-bottom on body to prevent content from being hidden behind the footer.</p>
</div>
<div class="footer">
Fixed Footer - Always Visible
</div>
</body>
</html>
A page with yellow gradient content and an orange footer that remains fixed at the bottom of the screen during scrolling.
Key Differences
| Property | Sticky Footer | Fixed Footer |
|---|---|---|
| Behavior | Sticks only when scrolling reaches it | Always visible at bottom |
| Content Overlap | No overlap issues | May overlap content without padding |
| Use Case | Natural footer placement | Persistent navigation/contact info |
Conclusion
Both position: sticky and position: fixed can create fixed footers. Use sticky for natural footer behavior and fixed for always-visible footers. Remember to add bottom padding when using fixed positioning to prevent content overlap.
861 Views
