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/>
    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;
          box-sizing: border-box;
          border: 1px solid green;
          padding: 5px;
        }
        
        #navigation {
          float: left;
          width: 200px;
          box-sizing: border-box;
          border: 1px solid red;
          
        }
        
        #main {
          float: left;
          height: 100%;
          width: calc(100% - 200px);
          box-sizing: border-box;
          border: 1px solid purple;
          padding: 5px;
        }
        
        #top {
          width: 100%;
          height: 50px;
          background-color: #666;
          box-sizing: border-box;
          border: 1px solid yellow;
        }
        
        #content {
          width: 100%;
          background-color: white;
          box-sizing: border-box;
          border: 1px solid blue;
        }