一篇文章解决CSS元素高度自适应__超全代码解析
首先CSS中元素高度自适应分类:
NO1:相对于窗口自适应:
解决此类高度自适应方法:html,body{height:100%;}
(子元素50%可相对窗口一半)
具体代码和运行结果如下:
NO2:相对元素或者内容自适应:
在讨论该分类时,要弄清楚:
什么是“非浮动元素的父元素”?
什么是“浮动元素的父元素”?
答:当父元素的“儿子辈”元素中至少有一个浮动元素,该父元素为“浮动元素的父元素”;否则为非浮动元素的父元素。(子元素的子元素,即“孙子辈”浮动与否并不产生影响!!)
1、非浮动元素的父元素高度自适应:
实现方法:
方法1:不设置高度,或者高度设为height:auto;
(让内容撑开父元素)
缺点:内容过少时,布局不美观。
方法2:(常用)通过最小高度实现高度自适应
例: min-height:30px;
(完善了方法1中内容过少时布局不美观的问题,超出最小高度后便将元素撑开,实现高度自适应。)
方法3:给需要高度自适应的元素添加下列属性:
min-height:300px;
height:auto!important; //关键字过滤器
height:300px:
(方法3为兼容IE6浏览器写法)
2、浮动元素的父元素高度自适应:
当父元素不设置高度的时候,第一级子元素浮动后,(元素浮起)父元素塌陷。只要解决了父元素的塌陷问题,浮动元素的父元素高度自适应
解决方法:
方法1:给父元素添加 overflow:hidden;
(触发BFC,便可应用BFC显示规则去显示。)
弊端:只要父元素中的内容或元素超出父元素,就会被隐藏。
方法2:在最后一个浮动元素下方设置一个空元素,并且给它设置下列属性:
clear:both;
height:0;
overflow:hidden;
弊端:会添加很多空标记,增加结构负担,产生代码冗余。
方法3:给父元素添加 display:table;
(让父元素转化和表格一个类型)
弊端:会改变当前元素的元素类型。(不推荐此类方法)
方法4:万能清除法(推荐)
::after{conten:“”;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;}
逆战班推荐“万能清除法”灵活使用如下:
在CSS中写好clear_fix
类的样式,下文元素需要万能清除法便给该元素设置该类即可。