title: CSS absolute child div overflows relative parent, toggled relative element
body: <p>In the following example, an absolute child div is contained in a relative parent.  The div preceding the parent is shown and hidden conditionally so the parent div should be aligned to the top whether or not the header is displayed.  </p>
  
  <p>The problem is when the header is displayed, the contents of the child div are hidden even if you scroll (the bottom of the scroll bar cannot be seen).  How can the bottom of the child div be the bottom of the parent div (in this case the browser window)?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  body {
    margin: 0;
    height: 100%;
  }
  #parentDiv 
  { 
    position:relative;
    background: yellow;
    height: 100%;
  }
  #childDiv 
  { 
    position:absolute; 
    left:50px; 
    top:20px;
    bottom: 0;
    background: blue;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='header'&gt;This header causes childDiv to scroll outside of the browser window (bottom scroll thumb isn't visible).
    This toggles so parentDiv should adjust up when not visible.  
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div id='parentDiv'&gt;
      This is the parent div
      &lt;div id='childDiv'&gt;
        This is the child div &lt;br&gt;
        This is the child div &lt;br&gt;
        (Repeat to extend beyond browser window and cause a scroll bar to be displayed)
        ...
        This is the child div &lt;br&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>