title: Alternative to 100vh for fixed positioned element?
body: <p>I have a <code>div (top navigation)</code> that is nested inside a <code>flex</code> container. When the <code>top-nav</code> expands, I want it to occupy the full height of the viewport. I know this can be achieved by setting a height of <code>100vh</code> but it is not widely supported. So, I need a more traditional way to achieve this.</p>
  
  <p>The <code>html</code> and <code>body</code> have a <code>height 100%</code> but the content of the view overflows and I can scroll the page.</p>
  
  <p>What I have right now is:</p>
  
  <pre><code>.top-nav .top-nav-links-wrapper {
      position: fixed;
      width: 100%;
      background-color: #fff;
      top: 50px;
      left: 0;
      height: 100%;        
  }
  </code></pre>
  
  <p>Is there a way to achieve this (apart from setting height to <code>100vh</code>)?</p>