鍍金池/ 問答/HTML/ vue中設(shè)置元素高度

vue中設(shè)置元素高度

有兩列div，左邊是根據(jù)后臺接口返回拉取的一個(gè)列表，右邊是內(nèi)容,想要設(shè)置兩列等高，我的想法是獲取元素高度，設(shè)置兩列高度，但是在調(diào)取接口中設(shè)置的話，更新列表，但是元素高度實(shí)際還并沒有，所以并沒有獲取高度，有什么辦法解決，或者通過css可以設(shè)置么
圖片描述

我的需求:
圖片描述

回答
編輯回答
離人歸

右邊的高度設(shè)置為100%

然后左右兩邊的父元素高度由左邊的列表填充決定, 代碼:

<div class="par">
    <div class="left"></div>
    <div class="right"></div>
</div>
.par {
    height: auto;
}
.right {
    height: 100%;
}
2018年5月16日 06:58
編輯回答
賤人曾

這類型問題叫等高布局，解決方法度娘上很多，我這里有一種：padding補(bǔ)償法。首先把列的padding-bottom設(shè)為一個(gè)足夠大的值，再把列的margin-bottom設(shè)一個(gè)與前面的padding-bottom的正值相抵消的負(fù)值，父容器設(shè)置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時(shí)的高度，當(dāng)它里面的任一列高度增加了，則父容器的高度被撐到它里面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補(bǔ)償這部分高度差。因?yàn)楸尘笆强梢杂迷趐adding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個(gè)障眼法。

2017年7月10日 02:31