html中关于区块高度自增长实现

这个问题还是折腾了一段时间,其实正常情况下,一般的浏览器,只要不设置高度,里面增加内容之后都会自动增长,但是一旦设置了如float:left这种左浮动,内容填充产生的自增长就直接失效,导致整个页面的区块完全凌乱,一开始还真是没想到什么好办法,后来虽然得到解决,可老是会忘记,所以干脆整理成文档吧。

例如我定义如下div,并设置内容:

<div id="book">
  <ul>
    <li>小说列表</li>
    <li>小说列表</li>
    <li>小说列表</li>
    <li>小说列表</li>
  <ul>
</div>

实现id为book的区块,高度自增长的css代码就是:

height:auto;
overflow:hidden;
zoom:1;

挺简单的,但是我容易忘,也是很尴尬。上面的css代码中,overflow规定当内容超出元素框时的事件定义,它的值hidden表示内容会被修剪,并且其余内容是不可见的。而zoom的用法在于,引用csdn 博客用户small dragon的博文:当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

发表评论
加载中...

相关文章