React中阻止聊天消息容器div挤压底部输入框的问题求解

核心问题原因 #

• 聊天容器仅设置min-height: 90vh，未限制最大高度，消息增多时容器会自动撑开，挤压下方元素
• 输入框容器设置position: absolute但未指定固定定位锚点，无法稳定停留在页面底部
• 根节点未设置高度基准，整个页面随内容自然撑高，无法实现区域独立滚动
• 列表渲染未加唯一key、元素内边距设置不合理、按钮误用position: fixed等小问题会进一步导致布局异常

修复后代码 #

CSS部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #root {
  height: 100vh;
  overflow: hidden;
}
.chat-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.chat-container {
  flex: 1;
  width: 80%;
  overflow-y: auto;
  padding: 16px;
}
.chat-container span {
  padding: 8px 12px;
  display: inline-block;
  border-radius: 4px;
  background: #f0f0f0;
  margin: 4px 0;
}
.message-box {
  height: 10vh;
  width: 100%;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #ffffff;
}
.message-box > form {
  width: 100%;
  display: flex;
  gap: 8px;
}
.message-box > form > input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.message-box button {
  padding: 8px 16px;
  cursor: pointer;
}

React组件部分 #

import { useRef, useState } from 'react';
// 替换为你项目中Form、Button组件的实际引入路径

function ChatPage() {
  const messageInput = useRef(null);
  const [msgList, setMsgList] = useState(["John: Hi"]);

  function handleSubmit(e) {
    e.preventDefault();
    const content = messageInput.current.value.trim();
    if (!content) return;
    setMsgList(prev => [...prev, `你: ${content}`]);
    messageInput.current.value = '';
  }

  return (
    <div className="chat-page-wrapper">
      <div className="chat-container">
        {msgList.map((msg, idx) => (
          <div key={idx}>
            <span>{msg}</span>
          </div>
        ))}
      </div>
      <div className="message-box">
        <Form onSubmit={handleSubmit}>
          <input ref={messageInput} placeholder="输入消息" />
          <Button type="submit" className="mb-1">
            Send
          </Button>
        </Form>
      </div>
    </div>
  )
}

export default ChatPage;

实现效果 #

• 输入框始终固定在页面底部，不会随消息增多被向下挤压
• 聊天区域自动占满输入框以外的全部视窗高度，消息超出高度时自动显示独立滚动条，不会覆盖输入框
• 无全局页面滚动条，交互符合主流聊天产品的使用逻辑

内容的提问来源于stack exchange，提问作者matei basar