title: How to create full height content section with fixed header and footer in CSS with scrollbar hidden if not required
body: <p>There are loads of questions like this on stackoverflow but none did exactly what I wanted.
  My requirements:</p>
  
  <ul>
  <li>Fixed Header and footer</li>
  <li>content section that takes up 100% of the space between the header and footer even when little or no content</li>
  <li>content section does not go under the footer unless it is too big and scrollbars required</li>
  <li>scroll bars hidden when content fits properly in between the header and footer</li>
  </ul>
  
  <p>The question is how do I implement this without any JavaScript?</p>