Easy sticky footer - stop a footer from floating up a short page!
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about footers that float up the page or overlap content, since it gives a quick flexbox fix they can copy.
Recommended by 2 people across 2 different months, 2020 to 2022.
What it is
A short CSS tutorial by Kevin Powell showing how to keep a page footer at the bottom of the viewport when content is short. He demonstrates two approaches, flexbox and CSS grid, and points to a CSS-Tricks article covering alternative sticky-footer techniques.
What people said
Recommends mreynoso9595 · 2022-02 · Stack Overflow · on “There is this unwanted space between my footer and main content”
I've been stuck on this issue for hours and hours at this point. I've been trying to work through it on my own but I am just unable to figure it out. Someone save me! Problem : Initially the problem was that my footer wouldn't stick to the bottom of the page, so I followed this popular YouTuber's tutorial on how to fix it using flex. Here's the vid: Easy sticky footer - stop a footer from floating up a short page! [this video] . This caused a new issue to arise, now there is this extra white space between my footer and the main content which I think is due to the "margin-top: auto" I added to the footer per the tutorial. This issue isn't apparent in the mobile view of my page but as I expand the
Recommends Michael Martell · 2022-03 · Stack Overflow · on “Bootstrap 4.6.0 footer overlap with body content when resizing browser screen?”
I had the same question a few weeks ago. This 7minute video from Kevin Powell really describes it well. I'd also recommend his channel. He covers a lot of the basics on CSS frequently. My opinion is it's better to learn vanilla before depending upon libraries and frameworks to do things for you... because then you won't know exactly how that library or framework is doing it. [this video] Here's the solution in Vanilla HTML / CSS based around that video. I changed around a few elements in your HTML just to make it easier to read. You'll probably have a few things you'll want to change but this is just to get you started! Of course you can still add bootstrap or JQuery in the future if you want wit
Cites Iasmini Gomes · 2020-05 · Stack Overflow · on “How to stick footer to bottom (not fixed) even with scrolling”
I'm using Bootstrap 4 and this worked for me link [this video] . I did this way in the CSS file (base.css): html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } footer{ padding: 3em; margin-top: auto; } And I've linked the css file in the html (base.html): <head> <link rel="stylesheet" type="text/css" href="'<path to css>'"/> </head>