title: Tricky positioning and sizing of div
body: <p>I have a div that is 100% wide by 180px tall - the header.</p>
  
  <p>Underneath that I want a div that stretches right to the bottom with a white background - the content div). The way I have implemented at the moment is that the content div is ALWAYS 180px underneath the browsing window (almost like a 180px scroll-down no matter the browser window size).</p>
  
  <p>Previously I have tried turning overflow:hidden on, but for the actual content, it MAY have to scroll down so I don't want to disable this functionality.</p>
  
  <p>Below is a drawing of what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/2jq8u.jpg" alt="enter image description here"></p>
  
  <p>Does anyone know a way to counteract this?</p>
  
  <p>EDIT:</p>
  
  <p>Apologies for not being clear. I want the content div to stretch to the bottom of the window in all circumstances but setting the value to 100% does not do me any good as it's then 180px below the viewport because the header pushes it down.</p>