如何实现元素高度自适应?
先思考这两个问题:
a、如果想实现元素高度自适应,高度能不能设置成固定的值?
b、如果高度不能固定,那该怎么设置呢?
第一种情况:
1)非浮动元素的父元素高度自适应
实现方法:
1、不设置高度,或者高度设置成 : height:auto;
2、通过最小高度实现高度自适应 : min-height:300px;_height:300px;
注:;_height:300px; 只有IE6 这个浏览器识别当前的属性,其他浏览器就都不识别了。
不设置height值时,浏览器默认height:auto;
第二种情况:
2)浮动元素的父元素高度自适应
说明:当父元素不设置高度的时候,第一级子元素浮动后,父元素高度塌陷;
怎么去解决?(只要解决高度塌陷的问题,父元素就能实现高度自适应了)
父元素内有两个浮动元,默认情况下,显示效果如图所示。
实现方法:
1、给父元素一个固定高度去解决高度塌陷问题
弊端:不能让元素高度自适应了。
2、overflow:hidden; 解决高度塌陷并能实现高度自适应的方法一;(遵循BFC的显示原则)
弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏。
3、在浮动元素的下方添加一个空元素,并且给他设置一下属性: 空标记:
clear:both;height:0;overflow:hidden;
弊端:会添加很多空标记,增加结构负担,产生代码冗余。
4、display:table; 给父元素添加display:table;让父元素转换元素类型跟表格的特性一样;
弊端:会改变当前元素的元素类型。
5、万能清除法:
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
注:这是常用的一种对浮动元素高度自适应的设置方式,也是比较推荐的一种。