Generate responsive layouts in minutes—skip manual task
What is the difference between a sticky footer and a fixed footer?
Why does my footer appear in the middle of the page?
Can I use sticky footers in React apps?
Which layout method is best for sticky footers: flex or grid?
Why does the page footer float in the middle? A sticky footer keeps it pinned to the bottom, even on short pages. Learn how to fix layout breaks using CSS flex, grid, and React—all with simple steps.
A half-empty page with a floating footer can make your layout feel broken. It’s a common issue, especially when content is concise and the layout isn't well-structured. Poor use of CSS or missing height settings often leads to this awkward spacing.
So, how do you ensure the footer stays anchored without compromising your layout?
That’s where a sticky footer comes in. It keeps your footer fixed to the bottom of the viewport without overlapping content or leaving odd gaps. It’s a simple fix that creates cleaner, more consistent pages.
This article walks you through clear, effective ways to create a sticky footer using CSS flexbox, grid, and React. You’ll learn how to set the right height, apply proper box-sizing, and build layouts that look balanced, no matter the content length.
A sticky footer refers to a footer element that remains at the bottom of the screen, even when the content inside is shorter than the viewport. In contrast to a fixed footer, a sticky one does not overlap content. The footer sticks to the bottom only when needed.
A well-implemented sticky footer ensures layout consistency across all screen sizes and avoids awkward white spaces. Most websites suffer from this issue in most cases when layout heights are not configured properly.
The most reliable way to implement a sticky footer layout is by using flexbox.
Here’s a complete flexbox example using display: flex with flex-direction: column:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <style> 5 html, body { 6 height: 100%; 7 margin: 0; 8 box-sizing: border-box; 9 } 10 11 *, *::before, *::after { 12 box-sizing: inherit; 13 } 14 15 .wrapper { 16 display: flex; 17 flex-direction: column; 18 min-height: 100vh; 19 } 20 21 .header { 22 background-color: #ccc; 23 padding: 20px; 24 } 25 26 .content { 27 flex: 1 0 auto; 28 padding: 20px; 29 } 30 31 .footer { 32 background-color: #333; 33 color: white; 34 padding: 10px; 35 text-align: center; 36 } 37 </style> 38</head> 39<body> 40 <div class="wrapper"> 41 <div class="header">Header</div> 42 <div class="content">Main content inside the page</div> 43 <div class="footer">Sticky Footer</div> 44 </div> 45</body> 46</html>
Explanation:
flex: 1 0 auto keeps the content area flexible.
.footer appears at the bottom without being fixed, ensuring it doesn’t overlap.
min-height: 100vh ensures the wrapper spans the full viewport height.
Another approach involves using CSS Grid with grid-template-rows. This method allows you to control the layout height directly.
1body { 2 margin: 0; 3 display: grid; 4 grid-template-rows: auto 1fr auto; 5 min-height: 100vh; 6}
1<body> 2 <header>Header</header> 3 <main>Content inside the page</main> 4 <footer>Footer</footer> 5</body>
Key notes:
grid-template-rows: auto 1fr auto gives the header, content, and footer their spaces.
This structure adapts to the screen, pushing the footer to the bottom.
Want to build a layout-ready web app with a sticky footer in minutes? Use rocket.new to create production-grade apps effortlessly, without touching complex code or layout logic.
In React apps, you can use the same techniques in JSX. Let’s use the React sticky footer approach with flexbox.
1const App = () => { 2 return ( 3 <div style={{ 4 display: 'flex', 5 flexDirection: 'column', 6 minHeight: '100vh', 7 boxSizing: 'border-box', 8 }}> 9 <header style={{ backgroundColor: '#ccc', padding: '20px' }}>Header</header> 10 <main style={{ flex: '1 0 auto', padding: '20px' }}>Page content</main> 11 <footer style={{ 12 backgroundColor: '#333', 13 color: '#fff', 14 textAlign: 'center', 15 padding: '10px', 16 }}> 17 Sticky Footer 18 </footer> 19 </div> 20 ); 21};
Explanation:
This is a minimal React sticky footer using inline styles.
flexShrink: 0 can be added to prevent the footer from shrinking on small screens.
| Problem | Cause | Solution |
|---|---|---|
| Footer overlaps content | Using position: fixed without margin | Use flex or grid, avoid fixed unless needed |
| Footer not at bottom | Missing min-height on parent | Add min-height: 100vh |
| Inconsistent spacing | No box-sizing: border-box | Always set global box-sizing |
| Layout breaks in React | Parent div missing height or flex | Ensure wrapper uses flex and fills height |
"Hey CSS friends! I’ve posted TWO new YouTube videos, how to create a ‘sticky footer’ using Grid or Flexbox." - LinkedIn
Use box-sizing: border-box to avoid layout overflow issues.
Set a min-height: 100vh on wrappers to ensure the layout fills the viewport.
Add margin-top only when spacing is required between the content and the footer.
Avoid fixed height unless working with constrained elements or device-specific layouts.
Use flex-shrink: 0 to prevent the footer from shrinking.
Always test your layout on multiple screen sizes and browser environments.
A misaligned footer can make your page feel broken and incomplete. But with the right approach, you can avoid floating footers and awkward gaps.
Utilize layout techniques such as flex, grid-template-rows, and min-height to establish a stable structure that remains consistent across various screen sizes. Tools like margin-top and proper box-sizing help maintain consistent spacing.
Apply these methods in your next static HTML or React project. A well-built sticky footer brings balance to your layout without extra fuss.
