title: CSS responsive absolute positioning
body: <p>I have a dropdown menu whose position should be depending on the height of the header. The height of the header varies by content, the font-size and the padding set by media queries in dependence of viewport height.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
    &lt;p&gt;Example&lt;/p&gt;
    &lt;nav&gt;
      &lt;a&gt;Link&lt;/a&gt;
      &lt;a&gt;Link&lt;/a&gt;
      &lt;a&gt;Link&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background-color: white;
  }
  
  header {
      background-color: grey;
      padding: 1rem 0;
      position: fixed;
      width: 100%;
  }
  
  @media(max-height: 500px) {
    header {
      padding: 0;
    }
  }
  
  nav {
    background-color: #CCC;
    position: absolute;
    top: 82px;
    width: 100%;
  }
  
  a {
    border-bottom: 1px solid white;
    display: block;
    padding: 0.75rem;
  }
  </code></pre>
  
  <p>Imagine <code>nav</code> is the folded out dropdown menu.</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/mjufc63b/2/" rel="nofollow noreferrer">https://jsfiddle.net/mjufc63b/2/</a></p>
  
  <p>If you decrease your window's height below 500 pixels it appears a white gap between header and nav, which should not be so. Also if you change your browser's font size.</p>
  
  <p>Is there a solution to get the dropdown menu always below the header independent of the header's height and also above the other content (what absolute positioning does) without using javascript and wihout moving the <code>nav</code> outside <code>header</code>?</p>