Summary of The Modern Way To Push That Footer Down — JUST 3 Lines Of CSS

The video discusses a simple yet often overlooked CSS technique to prevent footers from floating mid-page, particularly when creating web pages with various content management systems (CMS) or on different screen resolutions. The speaker emphasizes the importance of a proper layout to ensure footers are always positioned correctly at the bottom of the page.

Key Concepts and Techniques:

CSS Grid: The video introduces CSS Grid as a modern solution for layout management, allowing for a more flexible and responsive design.
HTML Structure: The speaker advises wrapping the header, main content, and footer within a single parent <div> to maintain proper structure.
Dynamic Viewport Height: Instead of using a static 100vh (viewport height), the speaker recommends using 100dvh (Dynamic Viewport Height) to accommodate mobile browser address bars, which can affect layout.
Grid Template Rows: The speaker explains how to define custom grid rows using the grid-template-rows property, suggesting the use of "Auto 1fr Auto" to allow the main content to expand while keeping the header and footer at their minimum sizes.
Sticky Positioning: The method also supports Sticky Positioning for headers, ensuring that the header remains visible while scrolling.

Implementation Steps:

Wrap the header, main, and footer in a single parent <div>.
Set the display to grid and apply a minimum height of 100dvh.
Define the grid rows as "Auto 1fr Auto" to allow the main content to grow.
If no footer is present, adjust the grid rows accordingly.

Additional Resources:

The speaker encourages viewers to subscribe for more frontend development tips and tutorials.
Mentions upcoming courses on Framer Motion and Tailwind CSS on their website.

Main Speaker:

The video is presented by a frontend developer who shares insights into effective web design practices.

Notable Quotes

— 05:53 — « That, my friends, is literally the only thing you have to do to prevent these floating footers. »

— 07:01 — « And again, there's literally no reason that you skip this, so please implement this in your next project. »