React+SCSS聊天框高度固定与无限滚动问题修复方案

核心问题 #

1. 容器高度溢出：.chat-box-messages和.chat-box-players-online设置了height:100vh，但外层容器.chat-box-container仅为50vh，导致子元素高度远超容器，滚动区域计算异常。
2. 输入框遮挡：.chat-box-message使用position:fixed固定在屏幕底部，脱离文档流后遮挡了消息区域的底部内容，导致无法滚动到最新消息。
3. 滚动区域高度不合理：.messages用百分比设置高度，但父元素高度错误，导致滚动空间不足。

修复后的SCSS代码 #

.chat-box-container {
  width: 100vw;
  height: 50vh;
  position: fixed;
  bottom: 0%;
  right: 0%;
  border-radius: 1em;
  background-color: #282e33;
  box-shadow: 5px 5px 15px 5px #000000;
  display: flex;
  flex-direction: column; /* 垂直分配header和body高度 */
}

.chat-box-header {
  color: white;
  display: grid;
  grid-template-columns: 1fr 50px;
  justify-content: center;
  border-bottom: 1px solid gray;

  h1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.chat-box-body {
  color: white;
  flex: 1; /* 占满容器剩余高度 */
  display: grid;
  grid-template-rows: 1fr auto; /* 消息区占上方，输入框固定在底部 */
  grid-template-columns: 1fr 150px;

  .chat-box-messages {
    height: 100%;
    display: flex;
    flex-direction: column;

    .messages {
      padding-left: 3%;
      border-radius: 1em;
      flex: 1; /* 自动填充剩余空间，确保滚动区域足够 */
      overflow-y: auto;
    }
  }

  .chat-box-players-online {
    border-left: 1px solid gray;
    border-radius: 1em;
    height: 100%;
    display: flex;
    flex-direction: column;

    h1 {
      border-bottom: 1px solid gray;
      text-align: center;
    }

    .players-online {
      padding-left: 5%;
      flex: 1; /* 自动填充剩余空间 */
      overflow-y: auto;
    }
  }

  .chat-box-message {
    grid-column: 1 / -1;
    width: 100%;
    border-radius: 1em;
    /* 移除fixed定位，让输入框在grid布局内正常排列 */
  }
}

修复说明 #

• 使用flex-direction: column让.chat-box-container内的header和body自动分配高度，避免固定值导致的溢出。
• 给.chat-box-body设置flex:1，确保它占满容器除header外的所有空间。
• 消息和玩家区域改用flex布局，让滚动区域.messages和.players-online自动填充剩余高度，保证所有内容都能滚动显示。
• 移除输入框的fixed定位，让它回到grid布局中，不再遮挡消息区域底部。

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