title: CSS: Making "overflowable" segments on webpage without absolute position
body: <p>I have a header and content on my page. The content should be scrollable within its own section so that user can scroll through all the text within content without losing sight of the header.</p>
  
  <p>This is doable with the code:</p>
  
  <pre><code>  position: absolute;
    overflow-y:scroll; 
  </code></pre>
  
  <p>But, this results in the content overlapping with the header.
  So, I define <code>top:80px;</code> but this only works for certain screen sizes. If you shrink the window the header starts to overlap with the content again.</p>
  
  <p>I want the content to start just under the header, but also have the attributes of being scrollable without losing view of the header.</p>
  
  <p>Here is a fiddle I have the current setup:
  <a href="https://jsfiddle.net/14zckot2/6/" rel="nofollow noreferrer">https://jsfiddle.net/14zckot2/6/</a></p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Adding:</p>
  
  <pre><code>  max-height: 100vh;
    overflow-y:scroll;
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>  position: absolute;
    overflow-y:scroll; 
  </code></pre>
  
  <p>works except the overflow should start at the bottom of the window, but instead it starts below of the bottom of the window (the amount that it is below the bottom of the windows is equal to the height of the header).</p>
  
  <p>How do I set the <code>max-height</code> to be equal the height of the window - the height if the header, or somewhat equivalently to be the distance between the start of the content and the end of the window?</p>