setting height 100% not working

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

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/

Your id='center' div needs to be inside something with height.

This helps me - whenever I set a style to width or height=100% I ask myself, "100% of WHAT?" that prompts me to make sure whatever the element is inside of is also styled properly for width and height.

Also, put different colored borders around things to see where and how big they really are. It can screw up dimensions but it gives you a good idea of what is really going on.

For a working 100% height property you need to have the parent div's height set.

In your case the element which is the parent of #center should have some height for your css to work as expected.

Usually, a div is only as high as its content regardless of the height you specify. You need to nest them. To avoid complication, I set a max-height and use absolute positioning for the elements I want to be at the bottom of the container.

As a design approach, you need to make sure the content of the div is the height you want. Padding can be a very useful tool. You can put ridiculous padding in and hide the overflow. Then it will cap off at your max-height.