title: Creating a div with a relative size, between absolute sized content
body: <p>I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.</p>
  
  <p>Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.</p>
  
  <p>So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.</p>
  
  <p>To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)</p>
  
  <p><img src="https://i.stack.imgur.com/gg3BU.png" alt="Demo"></p>
  
  <p>The orange border would represent the size of the complete page.</p>
  
  <p>I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?</p>