Container that fills remaining screen height

Design help General
1

Hey all,

This is something I have seen asked about plenty of times on here but never really seen a fix. In this example, how do I make that body div container 100% height of the remaining screen height instead of the total screen height which cause it to have scrolling?

Here is my site Read-Only: https://preview.webflow.com/preview/nav-sandbox?preview=dd96e8004883485023ec655b6b14205e

2

I got it figured out! Set the body to 100% height. Then put in a div and set it to absolute positioning with 100% width and height. In my example I had a Navbar component above the div and the dive sat below the Navabr and correctly filled the space below it.

3

I was just about to write that out but you figured it out for yourself. The body can be set to auto as it will then auto adjust to the height of its children.

1 Like