MoreLesson 247Free preview

Full Height Element

This lesson is part of How To · All levels

Summary

The Full-screen element is often used for the hero section or landing page. Height: 100% only works if all parents have a clear height, so min-height: 100vh is more practical. On mobile, consider the dvh unit so that the loudness does not break when the address bar of the browser changes.

Key points

Height: 100% requires a parent chain with explicit height.
Min-height: 100vh makes the element at least as high as the viewport but still can grow.
100dvh adjusted the dynamic viewport height on mobile devices.
Use box-sizing: border-box so that the padding does not add height beyond the calculation.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.