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: https://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