title: Div height percentage based but still scrolling
body: <p>First off, similar but never answered questions: </p>
  
  <p><a href="https://stackoverflow.com/questions/15572988/vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl">vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl</a></p>
  
  <p><a href="https://stackoverflow.com/questions/17060168/scroll-bar-on-div-with-overflowauto-and-percentage-height">scroll-bar-on-div-with-overflowauto-and-percentage-height</a></p>
  
  <p>I have an issue with scrolling a center part of the web page while its height needs to be auto.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/zvLvX/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.</p>
  
  <p>However the div #messages can become larger, and that div needs to scroll on its own.</p>
  
  <p>The #messages has a margin-bottom to leave room for the fixed bottom div.</p>
  
  <p>I tried making the div <code>#messages</code> with <code>box-sizing: border-box;</code> and making it <code>height:100%</code> and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.</p>
  
  <p>Any help would be greatly appreciated.</p>