How to use 100vh correctly?

Question

css

Hello. Such a situation:

The site has a header, under it there is a block with a picture for the entire height of the screen. I set the min-height parameter to it: 100vh. The block is stretched and a scroll appears the size of the height of the site header.

Can you tell me how to remove this scroll? Iterating over the min-height value is not an option. I tried to set a fixed height for the header, and then min-height: calc(100vh - #{$headerHeight}). It works, but it looks like a crutch.

Are there any more elegant options?

Answer 1

Grids can be used. Container with 100vh height and 2 rows. min-content and 1fr