Full height section overflows

Community resources General
1

Hi, I’m trying to build each section of the website to be full height and width.
I’ve set the section’s MinH as 100svh, layout to ‘Flex’, and the container which is a flex child’s layout to In-grid.

First section is the one that I have trouble with. (the one with the yellow bg)

https://sijoovari.webflow.io/

Here’s the link if you are willing to save me from this disaster…
As you can see, the yellow section is flowing over the full screen height. Please help me out!

2

yellow section is really min-height: 100svh - but the total height is:

1. navbar height (Sticky) + 2. first section > 100svh

solutions:

Option 1: Custom Javascript

For sticky navbar - the only solution is by code (copy-paste before body).

Simple code idea:

  1. Get navbar height (89.555 px for example).
  2. Hero Header - Set min-height - The value => 100svh Minus navbar height
<script>
  const navbar_height = $(".w-nav").outerHeight();
  $("#Main").css("min-height", `calc(100svh - ${navbar_height}px)`);
</script>

***keep in mind: This will override the min-height you set under webflow designer

Option 2: Use Fixed

Use fixed instead of sticky navbar.

1 Like
3

I chose option 2 and it worked! Thank you so much :smiling_face: