title: css `position: absolute; bottom: 0` moving div to bottom of screen instead of bottom of parent
body: <p>I have a website where I am trying to stick a menu-bar to the bottom of the header by using</p>
  
  <pre><code>#menu {
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>However, the menu-bar sticks to the bottom of the screen instead of the bottom of the parent <code>div</code>.</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>* {
      font-family: Arial, sans-serif;
      border: 0 solid black;
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      padding: 0;
      height: 500px; /*for testing*/
      background-color: #00FF00;
  }
  
  #header {
      height: 270px;
      border: 1px solid #FF0000;
  }
  
  #menu {
      display: block;
      height: 50px;
      padding: 16px;
      font-size: 18px;
      position: absolute;
      bottom: 0;
      border: 1px solid #0000FF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="nl"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="header"&gt;
  
          &lt;div id="menu"&gt;
              &lt;a href="/" id="home"&gt;Home&lt;/a&gt;
              &lt;a href="/evenementen.php" id="evenementen"&gt;Evenementen&lt;/a&gt;
              &lt;a href="/fotos.php" id="fotos"&gt;Foto's&lt;/a&gt;
              &lt;a href="/contact.php" id="contact"&gt;Contact&lt;/a&gt;
              &lt;a href="/inschrijvingen.php" id="inschrijvingen"&gt;Inschrijvingen&lt;/a&gt;
              &lt;a href="/partners.php" id="partners"&gt;Partners&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also note that if you run this snippet in full screen, the <code>body</code> seems to change its height to that of the viewport and <code>#menu</code> also goes to the bottom of the viewport.</p>
  
  <p>I have never had this problem, even though I've used <code>position: absolute;</code> a lot for this kind of work...</p>
  
  <p>Does anyone know how to solve this and what causes this?
  Thanks in advance!</p>