css - 设置高度 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/