title: Why position is changing when I rotate the view?
body: <p>I have a simple website with some divs. When I rotate the view from horizontal to vertical it should behave like this:</p>
  <p><a href="https://www.loom.com/share/c7cab98155aa4f05a9a8f6319625fbc6" rel="nofollow noreferrer">https://www.loom.com/share/c7cab98155aa4f05a9a8f6319625fbc6</a></p>
  <p>But it behaves like this:</p>
  <p><a href="https://www.loom.com/share/b43c6c51792f49a29a3d9582d9fffc4c" rel="nofollow noreferrer">https://www.loom.com/share/b43c6c51792f49a29a3d9582d9fffc4c</a></p>
  <p>The only difference is in the second example the div #nav is fixed position.</p>
  <p>It seems like this strange behavior on rotation is happening when:</p>
  <ul>
  <li>the divs have height in the vh units</li>
  <li>the nav div is fixed or sticky</li>
  </ul>
  <p>Is there a way to make it stay in the same position on rotation when the nav div is sticky and other divs have height in the vh units?</p>
  <p>Thank you in advance for your help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0px;
  }
  
  p {
      display: block;
      margin:0px;
      height: 30px;
  }
  
  div {
      height: 100vh;
      width: 100%;
  }
  
  #first {
      background-color: green;
  }
  #second {
      background-color: blue;
  }
  #third {
      background-color: red;
  }
  #fourth {
      background-color: cyan;
  }
  #fifth {
      background-color: pink;
  }
  #sixth {
      background-color: orange;
  }
  
  #nav {
      height: 70px;
      position: fixed;
      top:0px;
      background: black;
      opacity: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
       &lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="nav"&gt;
  
      &lt;/div&gt;
      &lt;div id="first"&gt;
          &lt;p&gt;Some text in the first div&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="second"&gt;
          &lt;p&gt;Some text in the second div&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="third"&gt;
          &lt;p&gt;Some text in the third div&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="fourth"&gt;
          &lt;p&gt;Some text in the fourth div&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="fifth"&gt;
          &lt;p&gt;Some text in the fifth div&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="sixth"&gt;
          &lt;p&gt;Some text in the sixth div&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>