overflow:hidden;zoom:1;外框自适应 [转]
在排页面时,碰到了,外框里的元素用fluid 布局,外框的高度不能适应的问题,查了一下资料,发现了博友的一篇文章,解决了这个问题,现在分享给大家。
解释不到位的请大牛补充~~~~~~
高度自适应:
height:auot;min-height:100px !important;
或
height:auto;overflow:hidden;zoom:1;
这是一个有意思的话题,特别第2种方法给人很多想象的空间。例如
<style type="text/css">
#div1 {
height:auto;
border:solid 1px red;
zoom:1; //高度自适应
overflow:hidden; //引起了 重新计算 外框的高度
}
#div2 {
float:left;
height:100px;
width:100px;
background:blue;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
你会发现包含框在非IE中也能够自动适应包含元素的高度,很奇怪的现象。
我们知道overflow属性设置当元素的内容溢出其区域时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。而hidden正相反,会自动剪切多出的内容。
现在就有一个问题了:
应该说,外包含框高度为0,那么它应该剪切所有的内容,即不显示任何内容。但是试验的结果却相反。这不得不让人思考其他问题:为什么呢?
考虑这个问题,我们应该从浏览器的解析机制开始,首先,浏览器遵循从上到下、从内到外的顺序来解析HTML结构,然后再解析这些结构的CSS样式。
而CSS属性的解析也是有顺序的,一般会遵循先主后次的顺序,也就是说overflow属性晚于其他属性进行解析,当浏览器解析完<div id="div1">的样式时,它会按着一定的逻辑不断进行计算。当解析overflow属性,它要完成几个计算问题:第一,元素本身是否定义了高度,第二,元素的布局模式,第三,包含子元素的大小。如果当元素没有明确定义高度的情况下,而布局又是以流动布局显示,此时它会考虑子元素的高度。也就是说,此时overflow:hidden声明触发了浏览器重新计算包含框的高度的可能性,此时它会考虑到子元素的高度,并努力包含子元素,避免子元素被裁切显示。因此,我们会看到了使用overflow:hidden声明之后,包含框能够自适应包含内部的子元素。
实际上,这是两种逻辑计算的重合所引发的一个有趣话题。
这是样吧的个人思考,并不代表权威解释,留待更多感兴趣的读者去思考和探索。
最新文章
- iOS 版本号大小比较
- 2015.4.20 Canvas Jquery 移动端 JavaScript
- 快速将一个表的数据生成SQL插入语句
- [Python Day5] 常用模块
- 树莓派3B安装pybluz
- DOS命令:IIS安装与卸载
- HYSBZ 4197 寿司晚宴
- 剑指Offer24 复杂链表的复制
- Spark Streaming揭秘 Day26 JobGenerator源码图解
- 摩尔斯电码(Morse Code)Csharp实现
- ASP.NET MVC 过滤器Filter
- POJ 3630 Phone List Trie题解
- CSS3的翻转效果
- SpringMVC 整合Jackson报错
- 自学Python之路
- mongodb建立索引
- liunx驱动----构造和运行模块
- 对yolo与fasterrcnn anchors的理解
- SHELL脚本--管道和重定向基础
- 探究Java中的锁
热门文章
- 结合docker发布后端项目(基于gradle包管理)的shell脚本
- 51nod 1086背包问题V2 (完全背包模板题)
- mongodb学习(一)——简介和基本操作
- 1、使用 as 而不要用 is
- java 常用锁
- restframework 序列化补充(自定义ModelSerializerl)
- Jenkins自动执行python脚本输出测试报告
- Qt Installer Framework翻译(6-0)
- Perl语言入门(中文版)(第6版) 东南大学出版社
- 月经贴 】 Csharp in depth