Alternative to 100vh for fixed positioned element?

Question

I have a div (top navigation) that is nested inside a flex container. When the top-nav expands, I want it to occupy the full height of the viewport. I know this can be achieved by setting a height of 100vh but it is not widely supported. So, I need a more traditional way to achieve this.

The html and body have a height 100% but the content of the view overflows and I can scroll the page.

What I have right now is:

.top-nav .top-nav-links-wrapper {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    left: 0;
    height: 100%;        
}

Is there a way to achieve this (apart from setting height to 100vh)?

Answer 1

Viewport units like vh and vw are well supported; Use them.

The other alternative is to set the position to fixed and set bottom: 0. height assumes the height of the parent element and doesn't take position, margin or padding into account; bottom assumes an offset from the bottom of the parent container. Same goes for width vs right. Remember, you should not use height and bottom at the same time or they'll override each other.

Here is a working example.

.fullscreen {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: cornflowerblue;
}

.body {
  height: 2000px;
}

<div class="fullscreen">this will be fullscreen with a top offset</div>

<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p>
</div>

Regardless of which units you use, the page is always going to be able to scroll behind the expanded nav. This shouldn't be a problem if your navbar is also given a fixed position so it can follow along.