<div class="area-one">
  <h2>Calc() is cool</h2>
  <div class="content">
    <p>The container is 100% in height. This content area needs to be as high as it, with its own overflow rule. We could make it 100% high, but then it would be too tall because there is a header above it. We know the header size, so we can make this content area calc(100% - 70px).</p>
  </div>
</div>

@import "compass/css3";

.area-one {
  width: 40%;
  float: left;
  height: 100%;
  margin-right: 1em;
  > h2 {
    background: #900;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    color: white;
    margin: 0;
  }
}
.content {
  padding: 15px;
  height: calc(100% - 50px);
  overflow: auto;
  background: red;
  p {
    margin: 0 0 1em 0;
  }
}

html, body {
  height: 100%;
  background: #ccc;
  padding: 20px;
}
body {
  padding: 20px;
  background: white;  
}
* {
  box-sizing: border-box;
}