我有一個(gè)三列佈局，其中中間列的部分高度有問(wèn)題。 一般來(lái)說(shuō)，它是一個(gè)聊天應(yīng)用程式。 類(lèi)別名稱是： 用於包含這三列的容器（我決定使用這樣的網(wǎng)格來(lái)使列的高度相等）：
display: grid;
grid-template-columns: 360px auto 300px;
grid-auto-rows: 1fr;
左列和右列不太重要，但必須說(shuō)明的是左列顯示使用者清單；清單的長(zhǎng)度可能會(huì)改變（可以篩選使用者）。右列具有靜態(tài)內(nèi)容（從大小的意義上說(shuō)）；
中間列：
position: relative;
在這個(gè)中間列中，我有3個(gè)div，其中第二個(gè)是個(gè)頭痛的問(wèn)題
頂部div（高度是固定的）；
height: calc(
var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2
);
底部div（高度也是固定的）
height: var(--users-search-wrapper-height);
bottom: 0;
當(dāng)初始渲染時(shí)，通常左列的內(nèi)容最高，底部div與其內(nèi)容在視覺(jué)上對(duì)齊。當(dāng)篩選使用者時(shí)，中間列的底部div與右列的底部部分在視覺(jué)上對(duì)齊。這是完全正常的。 問(wèn)題出現(xiàn)在聊天訊息出現(xiàn)在中間列的中間div時(shí)。只要這些消息很少，這不是一個(gè)問(wèn)題，但很快中間div變得很大並且突出。因此，中間列的高度變高，底部div越來(lái)越低，這破壞了佈局。我希望中間列的中間div在達(dá)到特定高度時(shí)獲得自己的滾動(dòng)條，並且不超過(guò)該高度，但這似乎非常複雜。
現(xiàn)在，中間div的樣式如下：
max-height: calc(
100% - var(--users-search-wrapper-height) -
(var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2)
);
height: as above;
overflow-y: scroll;
但它不起作用，內(nèi)容的高度隨著新訊息的增加而增加（儘管滾動(dòng)條是啟動(dòng)的，並且一些內(nèi)容在滾動(dòng)條的「後面」）。我懷疑這與列的容器沒(méi)有固定的像素高度有關(guān)。但它不可以。我還嘗試將中間列樣式設(shè)定為flex或grid，但效果都一樣。也許可以用JS解決，但我更希望有嚴(yán)格的CSS解決方案。你有什麼想法嗎？
1
0
0
給具有大尺寸的
overflow-y: scroll是無(wú)用的。這個(gè)屬性(overflow)假設(shè)高度比實(shí)際上低。所以要修復(fù)你的程式碼，你需要用以下屬性將那個(gè)<div class="wrap">...<div>：
.wrap {
height: calc(100vh - var(--top-div-height) - var(--bottom-div-height));
overflow-y: scroll;
}
其中var(--top-div-height)和var(--bottom-div-height)是頂部和底部
