title: Partially fixed header, fixed footer, and a variable width content that is scrollable in the X and Y directions as content grows
body: <p>There are lots of fixed footer/header variable width content posts but none seem to work for my specific use case.</p>
  
  <p>The easiest way to describe what I want is a google doc's style interface where the header and footer are fixed and the content is X/Y scrollable but was part of the header scrolls away when you start scrolling down</p>
  
  <p><a href="https://jsfiddle.net/zve0mb5m/" rel="nofollow noreferrer">https://jsfiddle.net/zve0mb5m/</a></p>
  
  <pre><code>HTML, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  
  div {
    padding: 10px;
  }
  
  .header {
    background: LightCoral;
    border: 10px solid IndianRed;
  }
  
  .fixed-header {
    position: sticky;
    top: 0px;
    background: Gold;
    border: 10px solid GoldenRod;
  }
  
  .content {
    overflow-y: scroll;
    overflow-x: scroll;
    height: 100%;
    background: YellowGreen;
    border: 10px solid OliveDrab;
  }
  
  .fixed-footer{
    position: fixed;
    bottom: 0px;
    background: LightSteelBlue;
    border: 10px solid SteelBlue;
    width: 100%;
  }
  
  &lt;div class="header"&gt;
    &lt;h1&gt;Non fixed header content&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="fixed-header"&gt;
    Fixed header content
  &lt;/div&gt;
  &lt;div class="content"&gt;
    Some content that will overflow horizontally aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  &lt;/div&gt;
  &lt;div class="fixed-footer"&gt;
    Fixed footer content
  &lt;/div&gt;
  </code></pre>
  
  <p>The above fiddle is what I have so far, in a working solution the border for the green content section would appear just above the blue footer which would allow the horizontal scroll bar to be present. </p>
  
  <p>Also, when scrolling the content section goes underneath the fixed header which isn't ideal. I want the content section to be fully visible at all times, and grow as we scroll. Possible with CSS? Do I need some JS in here?</p>