Having a div block fill the remainder of the screen?

Design help Layout & Design
1

Hello all,
I’m in the process of building a website for my golf instruction program and have ran into somewhat of a roadblock.
I’m wanting the “hero” section of the screen (hero text and image/circle) to fill 100% of the viewport browser height… I’m going to have multiple other sections below the hero section on the home page, and my image/circle are both positioned absolute so I’m a little unsure on how to tackle this… Any suggestions would be much appreciated. My read only link is below!

Here is my site Read-Only: [LINK][1]
[1]: https://preview.webflow.com/preview/jd-heatherly-golf?utm_medium=preview_link&utm_source=designer&utm_content=jd-heatherly-golf&preview=c153f62752682fb417be92bb994f9b9f&workflow=preview

2

Are you looking to do something like this:

Screen Shot 2022-03-10 at 3.37.21 PM
Screen Shot 2022-03-10 at 3.37.21 PM1920×916 79.9 KB

You can set your nav to 10vh (10% of the viewport height) and then your content container to 90vh = 100vh. You could just add the circle to the image and upload as a png and set it to a background image for the hero container.

While you are still early in the project I’d recommend naming some of your classes for easier help and keep you organized while your build it out!