Sometimes, you may find the footer will be floating halfway when the content is not available to fill the full page. This may lead to a messed-up layout on the webpage. In this blog, we will discuss different ways to fix the footer with examples.
Table of Contents:
Understanding the Problem
Usually, the HTML elements are placed one after the other. Therefore, the footer gets placed in the middle of the web page when it does not have enough content to fill the page. To fix this, you should make sure the footer stays at the bottom of the content and moves down automatically when there is enough content to push it lower.
You can use layouts such as flexbox and grid and position: fixed for this purpose. Let us discuss them below:
Learn to Build Modern, Responsive Websites from Scratch
Web Development Courses
Method 1: Using Flexbox
You can align and arrange the page easily using the Flexbox. You can set the <body> container to the flex and column mode, the content will automatically expand while fixing the footer to the bottom of the page. And you can also set the .main-content element to flex: 1 for this purpose.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Footer</title>
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-content">
<p>Main content goes here</p>
</div>
<footer class="footer">Footer Content</footer>
</body>
</html>
Output:
Explanation: In this code, display: flex and flex-direction: column create the flexbox layout with column mode, and .main-content element with flex: 1 creates a fixed footer.
Method 2: Using Grid Layout
You can use CSS grid layout for organizing your page. You can set the footer below the page using display: grid and create three rows (auto 1fr auto). You can see the middle row stretch to fill the extra space.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Footer</title>
<style>
body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
margin: 0;
}
.header, .footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
}
.main-content {
padding: 20px;
}
</style>
</head>
<body>
<header class="header">Header</header>
<main class="main-content">Main content here</main>
<footer class="footer">Footer Content</footer>
</body>
</html>
Output:
Explanation: In this code, you can see the Grid make sure it creates a header, main content, and footer. The main content stretches automatically and leaves the footer at the bottom.
Method 3: Using Fixed Position
You can use position: fixed to make the footer get fixed to the bottom of the page, and it does not depend on the content size.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning Footer</title>
<style>
html, body {
height: 100%;
margin: 0;
position: relative;
}
.footer {
Position: fixed;
bottom: 0;
width: 100%;
background: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-content">
<p>Main content goes here</p>
</div>
<footer class="footer">Footer Content</footer>
</body>
</html>
Output:
Explanation: You can use this code to fix the footer at the bottom using Position: fixed.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
The footer sometimes lies in the middle of the page without proper positioning. To fix this issue, you can use a CSS layout such as flexbox and grid and properties like Position: fixed. This will improve the visual appearance of your website, especially in the case of fewer content pages, by filling empty spaces.
Q1. What is a fixed footer?
A fixed footer is something that is fixed to the bottom of the webpages.
Q2. How do I make a fixed footer?
You can use layouts such as flexbox and grid and position: fixed to make a fixed footer.
Q3. Will a fixed footer overlap content?
Yes, it can overlap content if not implemented carefully.
Q4. Can I use other layout techniques?
Yes, you can use Flexbox and Grid layout with flex: 1 and grid-template-rows.
Q5. When is a fixed footer useful?
A fixed footer is helpful for the navigation links, contact details, and disclaimer.