title: Header and footer with horizontal scrolling content in pure HTML and CSS
body: <p>I'm attempting to create a layout using just HTML and CSS so that I don't have the additional complication of using Javascript to do layout.</p>
  
  <p>The layout is below, and consists of three parts: header, main content, and footer.</p>
  
  <p><img src="https://i.stack.imgur.com/cpAVn.png" alt="Sample layout"></p>
  
  <p>The header and footer should be the same height, and should always be visible.  On resize, the header, content, and footer should expand/contract accordingly, with a few exceptions.  First, when a max height on the main content is hit, the main content should not expand any more, and instead, the header and footer should just expand.  Second, when a min height on the main content is hit, none of the sections should contract anymore, and the view should just be scroll-able.</p>
  
  <p>As for the main content, it is horizontally scrollable with the viewport's main scrollbar at the bottom of the screen, while the header and footer should stay in place.</p>
  
  <p>So far, I've figured out how to achieve the horizontally scrollable main portion through a absolute positioned container div that fills the entire viewport, but I can't seem to figure out the vertical sizing of any of the elements.  The only way I can think of is to hook into the on resize event, which I'd like to avoid because it feels hacky.  </p>