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

Answer 2

你的id ='center'div需要在有高度的东西里面。

这对我有帮助 - 每当我将样式设置为宽度或高度= 100％时，我会问自己，“100％的什么？”这促使我确保内部的元素也适合宽度和高度。

此外，在物体周围放置不同颜色的边框，以查看它们的实际位置和大小。它可以搞砸尺寸，但它可以让你很好地了解真实情况。

Answer 3

对于工作的100％高度属性，您需要设置父div的高度。

在你的情况下，#center的父元素应该有一些高度让你的css按预期工作。

Answer 4

通常，无论您指定的高度如何，div都只能与其内容一样高。你需要嵌套它们。为了避免复杂化，我设置了一个最大高度，并对我想要在容器底部的元素使用绝对定位。

作为一种设计方法，您需要确保div的内容是您想要的高度。填充可以是一个非常有用的工具。你可以把荒谬的填充物隐藏起来并隐藏溢出物。然后它将在你的最大高度上限。