vue中设置元素高度

有两列div,左边是根据后台接口返回拉取的一个列表,右边是内容,想要设置两列等高,我的想法是获取元素高度,设置两列高度,但是在调取接口中设置的话,更新列表,但是元素高度实际还并没有,所以并没有获取高度,有什么办法解决,或者通过css可以设置么
图片描述

我的需求:
图片描述

阅读 16.2k
2 个回答

这类型问题叫等高布局,解决方法度娘上很多,我这里有一种:padding补偿法。首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的,所以就成功的完成了一个障眼法。

右边的高度设置为100%

然后左右两边的父元素高度由左边的列表填充决定, 代码:

<div class="par">
    <div class="left"></div>
    <div class="right"></div>
</div>
.par {
    height: auto;
}
.right {
    height: 100%;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题