有两列div,左边是根据后台接口返回拉取的一个列表,右边是内容,想要设置两列等高,我的想法是获取元素高度,设置两列高度,但是在调取接口中设置的话,更新列表,但是元素高度实际还并没有,所以并没有获取高度,有什么办法解决,或者通过css可以设置么
我的需求:
有两列div,左边是根据后台接口返回拉取的一个列表,右边是内容,想要设置两列等高,我的想法是获取元素高度,设置两列高度,但是在调取接口中设置的话,更新列表,但是元素高度实际还并没有,所以并没有获取高度,有什么办法解决,或者通过css可以设置么
我的需求:
右边的高度设置为100%
然后左右两边的父元素高度由左边的列表填充决定, 代码:
<div class="par">
<div class="left"></div>
<div class="right"></div>
</div>
.par {
height: auto;
}
.right {
height: 100%;
}
5 回答4.9k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
3 回答4.9k 阅读✓ 已解决
5 回答2k 阅读
2 回答4.8k 阅读✓ 已解决
4 回答4.4k 阅读✓ 已解决
4 回答1.9k 阅读✓ 已解决
这类型问题叫等高布局,解决方法度娘上很多,我这里有一种:padding补偿法。首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的,所以就成功的完成了一个障眼法。