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.