高度不适应

高度不适应指的是当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层对象使用margin或padding时。高度不适应问题不是IE的专利，就连Mozilla/Firefox也出现了这种问题，还是先来看看代码：
<div id="box">
<p>p对象中的内容</p>
</div>

高度不适应主要发生在两个嵌套的对象中，这里div作为外层对象，而p作为内层对象，然后编写以下的css代码：
#box {
background-color:#eee;
}
#box p {
margin-top: 20px;
margin-bottom: 20px;
text-align:center;
}

看看代码做了什么，除了背景之外，#box是一个几乎没有任何样式的div。而p对象加了两个非常关键的属性:margin- top:20px;margin-bottom:20px;上下外边距都是20px，这时按照前面的盒模型原理，p对象的高度应该是20+20+文字的高 度，应当在30px以上。理论上，由于p的高度在30px，#box这个div的高度也应当是由p的高度挤开，至少达到30px，我们看看预览后的效果。 预览后的效果似乎并非预想的结果，看上去带背景的#box似乎还是和文字一样高，并没有超过30px，这是为什么呢?为了验证一些事情，我们在xhtml 中前面和后面都加上一个带背景颜色的div：
<div class="box2">up</div>
<div id="box">
<p>p对象中的内容</p>
</div>
<div class="box2">down</div>

要观察的对象后面都加了一个class为box2的div，接下来加入一些样式让它能够有颜色方便我们观看：

.box2 {background-color:#aaa;}

可以注意到，上下两个div也并没有紧贴#box对象，而是有了间距效果，测量一下会发现这个间距刚好就是p对象的margin上下各20px，这 个测试验证了一个问题，就是#box对象并没有因为其中的p对象的margin变化而改变自身的高度，但是p对象的margin高度，有的确在整个页面中 占了一定的空间。

IE与Mozilla/Firefox在实际测试中都会发现这个问题，如果在制作多个div嵌套布局时，对页面的设计会产生一定的影响，如何解决这个问题呢?

解决方案

经过一些测试，我们发现如果对#box定义padding或border，会使#box重新计算自己的高度，例如：
#box {
background-color:#eee;
padding:1px 0px;
}

使#box自身上下各有1px的内边距，这样会使得#box根据自己的内边距的值与其中内容的大小，重新计算自己的高度，从而使自身能够适应内容的高度变化，或者使用border也能够做到，例如：
#box {
background-color:#eee;
border:1px solid #fff;
}

使用一个白色边框，用户在白背景下看不见这个边框，但#box自身会因为这个边框的产生而开始适应内容的高度。但这两个解决方法都会引发问题，如 padding:1px 0;之后，#box与内容的上边距，实际上是内容的margin-top:20px;加上#box的padding-top:1px;最终的间距值是 21px，如果对设计要求较高，这个值显然不符合要求，因此如果要达到完全精确的解决问题，我们需要找到一个新方法，不再从#box本身的属性入手，而是 在#box内部进行修复，我们可以修改xhtml代码加一些新的对象：
<div id="box">
<div class="clear-div"></div>
<p>p对象中的内容</p>
<div class="clear-div"></div>
</div>

在p对象的上下各加了两个空的div对象，然后编写它们的css代码：
.clear-div{
height:0px;
overflow:hidden;
}

对两个空对象，使高度为0px，并强制内容不显示，这样两个对象实际上只是充当了逻辑上的占位，而不发生实际上的占位。而对#box而言，由于其中多了一些逻辑上占位的对象，因此它会重新计算高度，从而实现高度的自适应。

从预览图中我们可以看到，#box已经可以高度自适应了，在IE及Mozilla/Firefox下均能够正常显示。使用空div或是对#box增 加border或padding的选择上，可以根据自身的情况而定，如果1px间距产生对页面的设计并没有太大的影响，不妨直接使用增加border或 padding，简单快捷，而要求严格的话就可以考虑使用空div来占位了。