当外容器调整大小时，如何使可滚动聊天 Div 保持在底部？

当外部 div 大小发生变化时，可滚动 div 粘在底部

问题：

在聊天应用程序界面中，包含消息的可滚动 div 应该粘在外部 div 的底部，即使外部div 的大小发生变化。例如，当用户调整文本输入区域的大小时，消息div应保持在底部。

解决方案：

1. CSS 方法：

使用 flex-direction: column-reverse;对于外部 div。这会反转 Flex 容器中元素的顺序，有效地将消息 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 方法效率低。

以上是当外容器调整大小时，如何使可滚动聊天 Div 保持在底部？的详细内容。更多信息请关注PHP中文网其他相关文章！