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)?

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)?

• javascript
• html
• css

• If your element is a direct child of the body, I think your code should work fine. But I believe vh, and vw are pretty widely supported. – Austin Ezell Commented Oct 19, 2017 at 17:26
• No the element isn't a direct child of body. – Himanshu Arora Commented Oct 19, 2017 at 17:35

2 Answers 2

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.

Strongly recommend against using vw/vh in web pages. They are very poorly supported by Safari, especially with the notch for iPhoneX*.

The other answer provided a solid alternative, using position, top, right, bottom and left.

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

will take up 100% of the first ancestor with a position other than the default, static.

using position: fixed will make it take up the whole layout viewport.

When you have the notch on iPhoneX, 100vw includes the notch in its measurement for iOS Safari even when your DOM does not include it.

100vh is not what you expect it to be on iOS Safari (it's a bit more than 100 viewport height).

window.innerHeight/Width and document.documentElement.clientHeight/Width are another consistency nightmare in Safari, but that's a topic for another day.

I work on one of those billion user website, and had to banned my team from using vw/vh in our code for this reason.