100% height

HTML

<div id="container">


<div id="navigation">
SIDE COLUMN
</div>
<div id="main">
  <div id="top">
    TOP BAR
  </div>
  <div id="content">
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
    CONTENT <br />
  </div> 
</div>
<div style="clear: both;"></div>
</div>

CSS

html, 
				body {
					margin:0;
					padding:0;
          }
        
        #container {
          background-color: #ccc;
        }
        
        #navigation {
          float: left;
          width: 200px;
        }
        
        #main {
          float: left;
          height: 100%;
          width: calc(100% - 200px);
        }
        
        #top {
          width: 100%;
          height: 50px;
          background-color: #666;
        }
        
        #content {
          width: 100%;
          background-color: white;
        }