读书人

转载 div+css 完善自适应高度 布局

发布时间: 2012-10-25 10:58:58 作者: rapoo

转载 div+css 完美自适应高度 布局

? 以前做后台管理框架基本都是采用iframe来布局,即便是现在这种布局还有着广泛的应用。众所周知现在不管是前台还是后台都提倡采用DIV+CSS布局,至于这样左右什么好处这里不做阐述,Google一下就能找到一大堆资料。Leeo本人也比较喜欢DIV布局,并且一直在各个项目中努力由表格布局转向DIV+CSS布局。

????? 我们知道用iframe框架做后台基本上都不用考虑什么高度自适应问题,因为iframe自动会自适应浏览器高度。但是用DIV+CSS来做布局,自适应浏览器高度就成了令人头疼的问题,因为即使你给DIV加上了height: 100%结果你还是发现根本不起作用,DIV依然只显示了其包含的内容的高度。难道是DIV对这样的高度设置根本就不认帐吗?其实不是的,只是因为DIV的高度属性跟它的父元素的高度属性是有关系的,前面说到的高度设置不起作用,其实是因为它的父元素的高度没有做相应设置造成的。

????? 下面是Leeo我写的一个完美DIV+CSS自适应高度后台框架,这里我之所以给它加上“完美”这两个字,是因为这个布局框架在IE5.5、IE6、IE7、IE8、Firefox、Chrome、Safari各浏览器下均表现完美,直接看代码吧:

实际效果请看这里DEMO

相当不错,方法简单效果好

读书人网 >CSS

热点推荐