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

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, Oct 19 '17 at 17:26

Soviut · Accepted Answer · 2017-10-19T17:42:50.500

8

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.

edited Oct 19 '17 at 17:42

answered Oct 19 '17 at 17:23

Soviut

88,194
49
192
260

setting bottom 0 does the same thing as 100%. Have tried that already. – Himanshu Arora Oct 19 '17 at 17:27
@HimanshuArora you must make sure to *remove* the height if you're going to set `bottom`. I've updated with a working example. – Soviut Oct 19 '17 at 17:29
yes I did remove the height 100%. I have content overflowing the body (and thus page scrolls), does setting bottom to 0 work for you in that scenario as well? It didn't work for me. – Himanshu Arora Oct 19 '17 at 17:33
I've updated with an example of the body being longer and the fixed position still holding on. – Soviut Oct 19 '17 at 17:36
Regardless of which units you use, the page is always going to be able to scroll behind the expanded nav. – Soviut Oct 19 '17 at 17:43
somehow now it works for me too. both bottom 0 and the height 100% is now working. earlier it was taking the height of the content (couldn't figure out why). Now the problem is I don't know what I changed accidentaly in the view that it works .. lol – Himanshu Arora Oct 19 '17 at 18:14
@HimanshuArora use your version control software to do a diff and compare what changed. – Soviut Oct 19 '17 at 19:41

score 7 · Answer 2 · edited Jul 25 '19 at 11:29

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.

Alternative to 100vh for fixed positioned element?

2 Answers2