100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 用纯CSS让子DIV自适应父DIV的高度

用纯CSS让子DIV自适应父DIV的高度

时间:2019-11-15 13:33:44

相关推荐

用纯CSS让子DIV自适应父DIV的高度

我们在前端布局时经常使用栅格布局,而当栅格布局中的某个子元素高度发生变化,外层的父元素高度也会发生变化,如果此时想让其他子元素的高度依旧填充父元素,我们应该怎么做。

这是HTML部分代码,此时左侧的高度比右侧的高。

<div class="out"><div class="a"><p>左侧的内容</p><p>左侧的内容</p><p>左侧的内容</p><p>左侧的内容</p><p>左侧的内容</p><p>左侧的内容</p></div><div class="b"><p>右侧的内容</p><p>右侧的内容</p></div></div>

这是没让子DIV自适应父DIV高度时的常规css代码

.a{width:200px;float:left;background-color:red;}.b{width:300px;float:right;background-color:blue;}

此时的展示效果是这样的,可以看到右侧的div比左侧的div短了一截。

此时我们修改css部分代码为

.out{overflow:hidden;}.a{width:200px;float:left;background-color:red;margin-bottom: -10000px;padding-bottom: 10000px;}.b{width:300px;float:right;background-color:blue;margin-bottom: -10000px;padding-bottom: 10000px;}

此时的样式就会变成这样,实现了我们想要的效果。

这里采取的就是内外都打上补丁的做法,将两个div的高度无限放大。而将外层的父div设上超出隐藏即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。