title: CSS layout - Fix a container to fill screen until one of two adjacent divs finishes scrolling
body: <p>I have two divs side by side that each take up 50% of the screen width and 100% of the screen height. One div has content that extends beyond the height of the div. I would like:</p>
  
  <ol>
  <li>The scrolling div to not start scrolling until the two divs fill the page (ie until the top of the divs are at the top of the window). </li>
  <li>The ability to have the cursor anywhere in the window (ie in either the scrolling div of the fixed div next to it) while scrolling. Currently the cursor must be in the scrolling div.</li>
  </ol>
  
  <p>These are both much better explained using an example that executes them perfectly: <a href="http://melaniedaveid.com/" rel="nofollow noreferrer">http://melaniedaveid.com/</a></p>
  
  <p>Demo of my current code: <a href="https://jsfiddle.net/qLn1dmvs/1/" rel="nofollow noreferrer">https://jsfiddle.net/qLn1dmvs/1/</a> </p>
  
  <p>What my HTML currently looks like: </p>
  
  <pre><code>&lt;div class="full-size-container"&gt;
    &lt;div class="full-height-half-width fixed-div"&gt;
      &lt;h4&gt;
      This should be fit to the screen and stuck until the right hand div finishes scrolling
      &lt;/h4&gt;
      &lt;h4&gt;
      I want the scroll to affect this entire full size container, ie if your cursor is in this left hand div, the right hand should still scroll
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="full-height-half-width scrolling-div"&gt;
      &lt;div class="row content"&gt;
        ** Scrolling Content **
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }
  .row:before,
  .row:after {
    content:"";
    display: table ;
    clear:both;
  }
  
  .full-size-container {
    height: 100%;
    width: 100%;
    background-color: #3c3c3c;
  }
  
  .full-height-half-width {
    width: 50%;
  }
  
  .fixed-div {
    left: 0;
    height: 100%;
    background-color: #8a8a8a;
    position: relative;
    float: left;
  }
  
  .scrolling-div {
    height: 100%;
    position: relative;
    background-color: #b3b3b3;
    overflow: auto;
  }
  </code></pre>
  
  <p>Any ideas for how to fix the scrolling issues are much appreciated!</p>