setting height 100% not working

Question

For some reason the container's boundaries won't go all the way to the bottom despite making its height 100%. Here is my code, the container is under another div center.

Html

<div id="center">
<div class="container" >
 </div>
 </div>

css

#center {   
  float:left;
  width:20%;
  margin-top:10px;
  height:100%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

Answer 1

You'll have to include something like this in your CSS...

body, html{
   height: 98%;
   padding: 0;
}

Play around with the height to eliminate the vertical scroll-bars caused by margins and borders on the elements contained within.

http://jsfiddle.net/4JgA4/1/

EDIT:

Otherwise, make it 100% and reduce the height of the main element inside to eliminate vertical scroll-bars.

body, html {
 height: 100%;
 padding: 0;
}

#center {  
 float:left;
 width:20%;
 margin-top:10px;
 height:90%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

http://jsfiddle.net/4JgA4/3/