CALC

calculation of the height

by Kondal Durgam

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 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).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).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).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).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).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).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...

CSS

@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;
}