title: CSS - hidden div at bottom of the page but visible header
body: <p>So I have a div that i want to position at the bottom of my page, with the body of the div completely hidden below the user's viewport, except the entirety of a header which is fixed to the bottom of the page.</p>
  
  <p>Contraints:</p>
  
  <ol>
  <li>The height of the entire div is dynamic, as there can be any number of items in there</li>
  <li>The header of the div is contained entirely within the div, syntax-wise</li>
  </ol>
  
  <p>Ideally I'd like to do this completely with CSS, but if a little bit of JavaScript is needed, that's fine too.</p>
  
  <p>Any ideas on how this can be done? <code>position: fixed</code> and <code>bottom: (height of header - height of div)</code> doesn't work because the height of the div changes when you resize the viewport.</p>
  
  <p><img src="https://i.stack.imgur.com/n2eSQ.png" alt="the thing i want to do"></p>