외부 컨테이너의 크기가 조정될 때 스크롤 가능한 Chat Div를 맨 아래에 고정하는 방법은 무엇입니까?

외부 div 크기가 변경될 때 스크롤 가능한 div가 아래쪽에 고정됩니다

문제:

채팅 애플리케이션 인터페이스에서 메시지가 포함된 스크롤 가능한 div는 외부 div의 하단에 고정되어야 합니다. div의 크기가 변경됩니다. 예를 들어 사용자가 텍스트 입력 영역의 크기를 조정할 때 메시지 div는 하단에 남아 있어야 합니다.

해결책:

1. CSS 접근 방식:

플렉스 방향 사용: 열 역방향; 외부 div의 경우. 이렇게 하면 플렉스 컨테이너의 요소 순서가 바뀌어 메시지 div가 하단에 효과적으로 배치됩니다.

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.message-div {
  flex: 1;
  overflow-y: scroll;
}

2. JavaScript 접근 방식:

CSS 솔루션이 특정 브라우저와 호환되지 않는 경우 JavaScript를 사용하여 메시지 div의 크기 조정 및 위치 조정을 처리할 수 있습니다.

// Resize function to adjust message div height
function resizeMessageDiv() {
  const messageDiv = document.querySelector('.message-div');
  messageDiv.style.height = calcMessageDivHeight();
}

// Helper function to calculate the message div height
function calcMessageDivHeight() {
  const outerDiv = document.querySelector('.outer-div');
  return outerDiv.clientHeight - document.querySelector('.text-input').clientHeight;
}

// Event listener for text input changes
document.querySelector('.text-input').addEventListener('input', resizeMessageDiv);

window.addEventListener('load', resizeMessageDiv); // Initial resize on page load

추가 참고:

JavaScript 솔루션은 더 유연하고 브라우저 호환성을 더 잘 처리하지만 추적이 필요합니다. 이벤트를 처리하고 메시지 div의 높이를 수동으로 업데이트하므로 성능 오버헤드가 발생하고 특정 시나리오에서는 CSS 접근 방식보다 효율성이 떨어질 수 있습니다.

위 내용은 외부 컨테이너의 크기가 조정될 때 스크롤 가능한 Chat Div를 맨 아래에 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!