Keep Footer at the Bottom of the Page: HTML & CSS (2024)

Keep the footer at the bottom of the page, even on pages with minimal content. In this video, we tackle the popular layout challenge of keeping the footer at the bottom of the page, using CSS grid and dynamic viewport units for a sturdy solution, especially on mobile devices where the page height can vary as users scroll.
CodePen: codepen.io/dmtrmrv/pen/NWmxbPx
Chapters:
00:00 - Introduction
00:27 - HTML Structure
00:54 - CSS Walkthrough
01:12 - CSS: Dynamic Viewport Height
01:38 - CSS: Implementing CSS Grid
02:03 - Reminder to Set Columns
02:25 - Avoid Setting 100% Height on HTML and Body
03:24 - Wrap-Up

[@alexmacol228]

Thank you!!! Again another great explanation!

[@dmtrmrv]

My pleasure! Glad you found it helpful!

[@Kiichyy]

you're such a hero for me. thank you!

[@dmtrmrv]

Thank you so much for your kind words! I'm really glad you found the video helpful. Calling me a hero might be a bit much, but I'm just happy to share what I know and help fellow engineers. If you have any other topics or tricks you're curious about, feel free to let me know. Thanks again for your support!

[@Kiichyy]

@@dmtrmrv It would be great if you could talk more about Grid and its measurements!

[@dmtrmrv]

@Kiichyy, thank you for the suggestion. I'll definitely look into it. Please feel free to write any specific questions or share what you're struggling with.

[@wobsoriano]

New subscriber here and loving your content!

[@dmtrmrv]

Welcome aboard!

[@ahmedahmedx9600]

Damn thats a blessing, im always facing this problem and i find your video, thank you very much sir, please make more videos like this

[@dmtrmrv]

Thank you for the kind words!

[@as.abdulazeem]

Thanks for this, my take home home here is the minmax you used on the grid columns and the reason why. I am anticipating your solution on the sticky to check with mine, once one, thanks.

[@dmtrmrv]

That’s right! minmax(0, 1fr) does all the magic in combination with 100dvh.

[@je9625]

This is a very good video and introduces a lot of best practices. I would suggest you make a video creating a website that incorporates and explains these practices. Good job, you just gained a subscriber.

[@dmtrmrv]

Thank you and welcome! That's an excellent suggestion, and I completely agree. It's already planned, but it's a bigger project, and requires some time, but I will definitely create one this year. I'm curious to know, what type of website would you like to see built? An app, a magazine, a portfolio, or something else?

[@douvogiannisgeorge]

i like your videos because its to the point, keep upp like this :)

[@dmtrmrv]

Thank you! I'm happy to hear that because that's one of my goals with this channel. Keeping the videos informative and short.

[@AmazingCreationsStudio]

nice content .. please bring more SECRET contents like this.. why SECRET ? well let me tell you.. " only a few people around the world brings this kind of important content "

[@dmtrmrv]

Thank you! I'll see what I can do :)

[@Danielo515]

How portable is this? Because if it only works in 90% of mobile devices, it is not good enough

[@dmtrmrv]

The latest feature in the video is the "dvh" units, which currently enjoy decent support. However, it's always better to review the analytics of the current project to understand the devices from which users are accessing it.