Problem description

Given a <section class="fullscreen-section">, write CSS to make the section fill the visible area using 100dvh (dynamic viewport height) where supported, but fall back to 100vh elsewhere. Center the content.

Goal

Fullscreen section adapts its height to the actual device viewport, handling mobile browser chrome using CSS only.

Constraints

• No JavaScript is allowed.

• Do not modify HTML.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.