title: CSS - Making a div consume all available space
body: <p>All,</p>
  
  <p>I have a page which is suppose to take up only the available screen space in the browser.</p>
  
  <p>I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.</p>
  
  <p><img src="https://i.stack.imgur.com/Hw7AP.jpg" alt="enter image description here"></p>
  
  <p>Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js. </p>
  
  <p>Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?</p>
  
  <p>Many thanks,</p>