How to achieve a sticky footer with Flexbox in CSS while maintaining responsiveness
I've been working on this all day and I'm maintaining legacy code that Currently developing an MVP for a startup and ran into a challenge with creating a sticky footer using Flexbox... The goal is to ensure that the footer stays at the bottom of the viewport, but I also want to maintain responsiveness across various screen sizes. Here’s a simplified layout of my HTML: ```html <div class="container"> <header>Header Content</header> <main>Main Content</main> <footer>Footer Content</footer> </div> ``` In my CSS, I've structured it like this: ```css html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } footer { background-color: #ccc; text-align: center; padding: 1em; } ``` This setup works well on desktop, but when I test it on mobile, the footer doesn't always stick to the bottom if the content is short. I’ve tried various adjustments, such as adding a `min-height` to the footer and tweaking the `flex` property of the main content, but the responsiveness issues persist. What I’m looking for are best practices to ensure that the footer behaves consistently across devices. Are there any specific Flexbox properties or alternative strategies I can use to make this work smoothly without introducing unnecessary complexity? Any insights would be appreciated! The stack includes Css and several other technologies. Thanks for your help in advance! Thanks in advance!