How to Create a Sticky Footer Using CSS Flexbox? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Creating a sticky footer using CSS Flexbox ensures that the footer remains at the bottom of the viewport or the content and provide a consistent layout experience. In this article we will cover approach to create a sticky footer using CSS Flexbox.ApproachSet the html and body elements to 100% height and remove default margins.Style the body to be a flex container with a column direction to allow easy management of the header, main content, and footer.Create a .container div to hold the header, main content, and footer.Set the container to flex: 1 to expand and take up available space, and add padding at the bottom to prevent content from being hidden behind the footer.Style the footer to be positioned fixed at the bottom of the viewport using position: fixed.Example: In below example we have created sticky footer which remain sticky even if we scroll down. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Footer</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <h1>Course Offerings</h1> </header> <main> <h2>Hello, What Do You Want To Learn?</h2> <div class="card"> <h2>DSA Self-Paced</h2> <p>Learn Data Structures and Algorithms at your own pace with our comprehensive course.</p> <a href="#">Learn More</a> </div> <div class="card"> <h2>JavaScript Fundamentals</h2> <p>Master the fundamentals of JavaScript, the language of the web.</p> <a href="#">Learn More</a> </div> <div class="card"> <h2>React MERN Stack</h2> <p>Become proficient in building full-stack applications with the MERN stack (MongoDB, Express, React, Node.js).</p> <a href="#">Learn More</a> </div> </main> <footer> <p>@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved </p> </footer> </div> </body> </html> CSS html, body { height: 100vh; margin: 0; } body { display: flex; flex-direction: column; margin: 0; } /* Main container to hold header, // main content, and footer */ .container { flex: 1; display: flex; flex-direction: column; padding-bottom: 3rem; } header { background-color: #f1f1f1; padding: 1rem; text-align: center; } main { flex: 1; padding: 1rem; min-height: 100vh; } .card { border: 1px solid #ddd; border-radius: 5px; padding: 1rem; margin: 1rem 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card h2 { margin-top: 0; } .card p { margin: 0.5rem 0; } .card a { display: inline-block; margin-top: 0.5rem; padding: 0.5rem 1rem; color: white; background-color: #007bff; text-decoration: none; border-radius: 5px; } .card a:hover { background-color: #0056b3; } /* Footer styling */ footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgb(123, 196, 123); color: white; text-align: center; padding: 1rem; } Output:Output Comment More infoAdvertise with us Next Article How to Create a Sticky Footer Using CSS Flexbox? G ghuleyogesh Follow Improve Article Tags : HTML CSS-Questions Similar Reads How to Create a Sticky Element using CSS? A sticky element is a positioning technique in CSS that allows an element to behave like a relatively positioned element until a specific scroll position is met, after which it behaves like a fixed element. This is particularly useful for creating sticky headers, sidebars, or any other UI elements t 3 min read How to create fixed/sticky footer on the bottom using Tailwind CSS ? In this article, we are going to create a fixed/sticky footer on the bottom using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. With Tailwind CSS we can create a design by simply adding classes. Installatio 2 min read How to Create a Fixed Footer? A fixed footer remains at the bottom of the viewport, ensuring it stays visible regardless of page scrolling. Below are two methods to create a fixed footer:1. Using position fixed PropertyTo create a fixed footer using position: fixed, apply this property to the footer element in CSS. Set the botto 3 min read How to Create A Sticky NavBar Using Tailwind CSS? Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of 4 min read How to create a Simple Footer using Bootstrap 5 ? Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bo 4 min read Like