title: CSS 100% height layout
body: <p>I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for. </p>
  
  <p>I would like to convert <a href="http://pastehtml.com/view/av6fb8bir.html" rel="noreferrer">this</a> to a tableless layout.</p>
  
  <p><img src="https://i.stack.imgur.com/rGT9d.png" alt="enter image description here"></p>
  
  <p>Note: header and footer have to be set to a fixed height in pixels (50px is ok).</p>
  
  <p>The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.</p>