How to make a full-height section

Short answer

The vh unit is a percentage of the window height, so 100vh is the whole screen:

.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

The second line with dvh overrides the first where it is supported. On a phone 100vh can be taller than the visible area because of the address bar, and dvh takes it into account.

An example in a window

The example below is a small window of its own, so vh in it counts from the example's height:

<style>
  body { margin: 0; }
  .hero { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(teal, navy); color: white; }
</style>
 
<section class="hero"><h1>Welcome</h1></section>

Which unit to pick

svh is the height with the browser bars shown (the smallest), lvh with them hidden (the largest), and dvh changes on the fly. For a site's first screen dvh or svh is usually enough.

Common mistake

height: 100vh caps the block: if there is more text than fits on the screen, it spills out over the next section. min-height lets the block grow, so use it for sections.