宽高自适应

很多时候我们写HTML的时候,一些元素里的内容并不是固定的,他会随着后台的更新而逐渐变多,这种时候布局就不方便去固定大小了。

很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是宽高自适应!

一般的块元素高度自适应都是将高度设置为100%,那么他的高度就会随着子元素的增加而增加。
在这里插入图片描述在这里插入图片描述在这里插入图片描述
这种时候的话是常见也是最方便普通的自适应方法,不管内容有多少,他的高度都会一直增加!

但是如果有特殊点的情况就不一样了,比如这个父元素里面有两个浮动元素!
在这里插入图片描述
在这里插入图片描述
由上图可以看出当有两个浮动的子元素的时候父元素的高度并没有被撑开,即使他高度设置为了100%!

一般来讲最方便并且不会影响到页面布局也没有明显的坏处的办法就是万能清除法,就是在需要高度自适应的父元素的class里加入:
.clear_fix:after{content: “”;clear: both;display:block;height:0;overflow: hidden;visibility: hidden;}这段代码,就可以了!
在这里插入图片描述
在这里插入图片描述
这种方法是最高效的,之后不管这个页面哪里需要高度自适应,只需要将clear_fix加进去就好了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值