设置高度100%不工作

Question

出于某种原因,尽管容器的高度为100%,但容器的边界不会一直到底.这是我的代码,容器在另一个div中心.

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

你必须在你的CSS中加入这样的东西......

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

使用高度来消除由于其中包含的元素的边距和边框导致的垂直滚动条.

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

编辑:

否则,将其设为100%并降低内部主要元素的高度以消除垂直滚动条.

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/