我们在前端布局时经常使用栅格布局,而当栅格布局中的某个子元素高度发生变化,外层的父元素高度也会发生变化,如果此时想让其他子元素的高度依旧填充父元素,我们应该怎么做。
这是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设上超出隐藏即可。