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 do you get the footer to stay at the bottom of a Web page in HTML?
Creating a footer that stays at the bottom of a web page is a common web design requirement. There are different approaches depending on whether you want a sticky footer (always visible at bottom of viewport) or a footer that stays at the page bottom (appears after all content).
Using Fixed Position for Sticky Footer
The position: fixed property creates a footer that remains visible at the bottom of the browser window, even when scrolling. This approach keeps the footer constantly visible to users.
Syntax
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background-color: black;
color: white;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Fixed Footer Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0 20px 60px 20px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: #333;
color: white;
text-align: center;
line-height: 50px;
z-index: 1000;
}
.content {
height: 1200px;
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h2>Main Content</h2>
<p>This is a long page with lots of content. Scroll down to see the fixed footer in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. The footer will remain visible at the bottom of your screen as you scroll through this content.</p>
</div>
<div id="footer">
Fixed Footer - Always Visible
</div>
</body>
</html>
The footer remains fixed at the bottom of the viewport while the content scrolls behind it. Note the padding-bottom: 60px on the body to prevent content from being hidden behind the footer.
Using CSS Table Display for Page-Bottom Footer
The display: table and display: table-row approach creates a footer that appears at the bottom of the page content or viewport (whichever is lower). This method ensures the footer is always at the very bottom without overlapping content.
Syntax
html, body {
height: 100%;
margin: 0;
display: table;
}
footer {
display: table-row;
height: 1px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Table Display Footer</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
font-family: Arial, sans-serif;
}
.content {
display: table-row;
height: 100%;
padding: 20px;
background: #f9f9f9;
}
footer {
background-color: #333;
color: white;
display: table-row;
height: 1px;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<div class="content">
<h2>Page Content</h2>
<p>This content area will expand to fill the available space, pushing the footer to the bottom of the viewport or page, whichever is lower.</p>
<p>The footer uses table-row display to automatically position itself at the bottom.</p>
</div>
<footer>
Table Footer - Always at Bottom of Page
</footer>
</body>
</html>
This method automatically adjusts the footer position based on content height. If content is short, the footer stays at the viewport bottom. If content is long, the footer appears after all content.
Using CSS Flexbox for Modern Footer Layout
CSS Flexbox provides a more modern and flexible approach to creating bottom footers. This method is widely supported and offers better control over layout behavior.
Example
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Footer</title>
<style>
html, body {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background: #f5f5f5;
}
.footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
margin-top: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h2>Flexible Content Area</h2>
<p>This content area uses flexbox to automatically expand and push the footer to the bottom.</p>
<p>Flexbox provides better browser support and more predictable behavior than table display methods.</p>
</div>
<div class="footer">
Flexbox Footer - Modern Approach
</div>
</div>
</body>
</html>
The flexbox approach uses flex: 1 on the content area to make it grow and fill available space, automatically pushing the footer to the bottom.
Comparison of Footer Methods
| Method | Use Case | Behavior | Browser Support |
|---|---|---|---|
| Fixed Position | Sticky navigation footer | Always visible, overlays content | Excellent |
| Table Display | Page-bottom footer | Stays at bottom, no overlap | Good (legacy) |
| Flexbox | Modern page-bottom footer | Flexible, responsive, no overlap | Excellent (modern) |
Conclusion
Use position: fixed for sticky footers that remain visible while scrolling, the table display method for legacy browser support, and CSS Flexbox for modern, flexible footer layouts. Flexbox is the recommended approach for new projects due to its simplicity and excellent browser support.
975 Views
