高度不能自适应问题

最新推荐文章于 2021-08-27 15:38:21 发布

Kenlist_world

最新推荐文章于 2021-08-27 15:38:21 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：令人休克的CSS HACK 文章标签： div class html css 制造 up

本文链接：https://blog.youkuaiyun.com/Kenlist_world/article/details/2167890

令人休克的CSS HACK 专栏收录该内容

4 篇文章

订阅专栏

先看下面页面源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

#box{

background-color:#eee;

}

#box p{

margin-top:20px;

margin-bottom:20px;

text-align:center;

}

.box2{background-color:#aaa;}

</style>

</head>

<body>

<p>p对象中的内容</p>

</div>

</body>

</html>

打开IE,发现p对象的的上下出现2个空白的位置,但从代码上看,很明显由于设置了p的margin-bottom:20px;和margin-top:20px;使父容器box的高度增大了.并且再由background-color:#aaa设置box的背景颜色.所以理应在up和down之间的div应该充满着#aaa这种颜色,但现在却出现了2个空白,这是为何呢?

原因就在于这个常见的高度不能自适应问题,因为p的变化导致了div的高度再变化,所以这种多次变化很容易就会导致载体的高度不能再变化.如果要让它再变化,非常简单,只需要轻轻地"刺激"一下它.在box里面随便加句会改变它容器的某个元素的语句即能达到"刺激"作用.例如在box中加入一句:padding:1px;或者margin:1px;发现马上恢复正常了.

很显然,"刺激"的方法需要强制性地更加某个不想添加或者不希望改变的值.我们需要一种更好的方法.下面介绍另一种方法.

在<p>p对象中的内容</p>这句的上一行和下一行都加入一句<div class="clear-div"></div>,加入这些div是想让这个无关重要的div做到刺激效果.然后加入一条CSS:.clear-div{height:0;overflow:hidden;}加入height:0;很明显就是一个刺激作用,让它的父容器重新计算其对上高度和对下高度,而overflow:hidden则是作者的一个技巧,因为如果不设置overflow:hidden的话,那么即使你设置height是多么的小,都始终会留一个字符大小的空间让字符输入,如果加了这句,就能使一切都遵循height的设置,一个字符的大小也不用显示.这样才能真正制造出一个不存在的空间.