當外容器調整大小時，如何使可滾動聊天 Div 保持在底部？

當外部div 大小發生變化時，可滾動div 粘在底部

問題：

在聊天應用程式介面中，包含訊息的可捲動div 應該黏在外部div的底部，即使外部div 的大小改變。例如，當使用者調整文字輸入區域的大小時，訊息div應保持在底部。

解決方案：

1. CSS 方法：

使用flex-direction: column-reverse;

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

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

使用flex-direction: column-reverse; 。這會反轉 Flex 容器中元素的順序，有效地將訊息 div 放置在底部。

2. JavaScript 方法：

// 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

如果 CSS 解決方案與某些瀏覽器不相容，您可以使用 JavaScript 來處理訊息 div的大小調整和重新定位：

其他注意：

雖然JavaScript 解決方案更靈活並且可以更好地處理瀏覽器相容性，但它需要保留追蹤事件並手動更新訊息div 的高度，這可能會帶來效能開銷，並且在某些情況下比CSS 方法效率低。

以上是當外容器調整大小時，如何使可滾動聊天 Div 保持在底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！