很多时候我们写HTML的时候,一些元素里的内容并不是固定的,他会随着后台的更新而逐渐变多,这种时候布局就不方便去固定大小了。
很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是宽高自适应!
一般的块元素高度自适应都是将高度设置为100%,那么他的高度就会随着子元素的增加而增加。
这种时候的话是常见也是最方便普通的自适应方法,不管内容有多少,他的高度都会一直增加!
但是如果有特殊点的情况就不一样了,比如这个父元素里面有两个浮动元素!
由上图可以看出当有两个浮动的子元素的时候父元素的高度并没有被撑开,即使他高度设置为了100%!
一般来讲最方便并且不会影响到页面布局也没有明显的坏处的办法就是万能清除法,就是在需要高度自适应的父元素的class里加入:
.clear_fix:after{content: “”;clear: both;display:block;height:0;overflow: hidden;visibility: hidden;}这段代码,就可以了!
这种方法是最高效的,之后不管这个页面哪里需要高度自适应,只需要将clear_fix加进去就好了!