CodePen

HTML

            
              <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 it's 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>
            
          
!

CSS

            
              .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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................