div 높이를 제한하는 프로젝트 구현 방법

Question

중간 열에 높이 문제가 있는 3열 레이아웃이 있습니다. 일반적으로 말하자면 채팅 애플리케이션입니다. 수업 이름은 다음과 같습니다. 이 세 개의 열을 포함하는 컨테이너의 경우(열의 높이를 동일하게 만들기 위해 이와 같은 그리드를 사용하기로 결정했습니다):

으아아아

왼쪽 열과 오른쪽 열은 덜 중요하지만 왼쪽 열에는 사용자 목록이 표시된다는 점에 유의해야 합니다. 목록의 길이는 다를 수 있습니다(사용자는 필터링될 수 있음). 오른쪽 열에는 (크기 측면에서) 정적 콘텐츠가 있습니다.

가운데 열:

으아아아

이 중간 열에는 3개의 div가 있는데, 그 중 두 번째는 골치 아픈 일입니다

상단 div(높이는 고정됨);

으아아아

하단 div (높이도 고정됨)

으아아아

처음 렌더링될 때 일반적으로 왼쪽 열의 콘텐츠가 가장 높고 아래쪽 div가 해당 콘텐츠와 시각적으로 정렬됩니다. 사용자를 필터링할 때 가운데 열의 하단 div가 오른쪽 열의 하단 섹션과 시각적으로 정렬됩니다. 이것은 완전히 정상입니다. 문제는 중간 열의 가운데 div에 채팅 메시지가 나타날 때 발생합니다. 이러한 메시지가 적으면 문제가 되지 않지만 곧 중간 div가 매우 커지고 튀어나옵니다. 따라서 가운데 ​​열은 더 커지고 아래쪽 div는 낮아져 레이아웃이 손상됩니다. 중간 열의 중간 div가 특정 높이에 도달하고 해당 높이를 초과하지 않을 때 자체 스크롤 막대를 갖기를 원하지만 이는 매우 복잡해 보입니다.

이제 중간 div의 스타일은 다음과 같습니다.

으아아아

하지만 작동하지 않습니다. 새 메시지가 있으면 콘텐츠 높이가 늘어납니다(스크롤 막대가 활성화되어 있고 일부 콘텐츠가 스크롤 막대 "뒤에" 있더라도). 나는 이것이 고정된 픽셀 높이가 없는 열의 컨테이너와 관련이 있다고 생각합니다. 하지만 그럴 수는 없습니다. 또한 중간 열 스타일을 flex 또는 Grid로 설정해 보았지만 모두 동일하게 작동합니다. JS로 해결될 수도 있겠지만, 저는 엄격한 CSS 솔루션을 선호합니다. 어떤 아이디어가 있나요?

Answer 1

크기가 큰

요소에 overflow-y: scroll을 설정하는 것은 쓸모가 없습니다. 이 속성(overflow)은 높이가 실제보다 낮다고 가정합니다. 따라서 코드를 수정하려면 해당 overflow-y: scroll是无用的。这个属性(overflow)假设高度比实际要低。所以要修复你的代码，你需要用以下属性将那个

元素包装起来，比如：<div class="wrap">...<div> 요소를 다음과 같은 속성으로 래핑해야 합니다. <div class="wrap">...<div>:

으아악

여기서 var(--top-div-height)和var(--bottom-div-height)는 상단 및 하단

요소의 높이입니다.