React Material UI中滚动Div内聊天输入框固定底部及宽度适配问题

问题根源 #

• fixed定位的元素脱离文档流，不会继承父容器的宽度（它的包含块是浏览器视口），所以width: inherit无效，导致宽度仅为容器一半。
• 直接设width: 100%时，未考虑视口默认边距、父容器padding或输入框自身内边距，导致宽度溢出屏幕，移动端视图中被隐藏。

修复方案 #

1. 调整DOM结构：把输入框从滚动<Box>中移出，放在外层容器底部，避免滚动容器的overflow属性干扰输入框显示。
2. 用MUI的sx属性控制定位与宽度：给输入框包裹fixed定位的容器，让它自动适配父容器宽度，同时通过内边距避免溢出。
3. 给消息列表加底部padding：防止最后一条消息被输入框遮挡。

修改后的代码示例 #

// 外层容器，确保占满视口高度
<Box sx={{ position: 'relative', height: '100vh' }}>
  {/* 消息滚动区域，预留输入框高度 */}
  <Box sx={{ overflowY: 'scroll', height: 'calc(100% - 60px)', backgroundColor: 'blue' }}>
    <List sx={{ width: '100%', bgcolor: 'background.paper', pb: 8 }}>
      {Array.isArray(messageDetails) && messageDetails.map((message) => (
        <ListItem key={message._id}>
          <ListItemAvatar>
            <Avatar>
              <PersonOutline />
            </Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={getChatUsername(user, message.relativeUserId)} 
            secondary={message.messageText} 
          />
          <span style={{ color: "grey", fontSize: '10px' }}>
            {formatDistanceToNow(new Date(message.createdAt))} ago
          </span>
        </ListItem>
      ))}
    </List>
  </Box>

  {/* 固定底部的输入框容器 */}
  <Box sx={{ 
    position: 'fixed', 
    bottom: 0, 
    left: 0, 
    right: 0,
    padding: '8px 16px',
    backgroundColor: '#fff',
    boxShadow: 1
  }}>
    <Input
      sx={{ 
        backgroundColor: '#EEEEEE', 
        padding: '10px',
        width: '100%'
      }}
      value={message_input}
      onChange={(e) => setMessageInput(e.target.value)}
      type="text"
      inputProps={{ style: { padding: "10px" } }}
      disableUnderline
      placeholder="Type message...."
      startAdornment={
        <TagFacesIcon sx={{ paddingLeft: "20px", color: "#777" }} />
      }
      endAdornment={
        <IconButton sx={{ paddingRight: "20px" }} onClick={handleMessageSubmit}>
          <SendIcon sx={{ color: "#777" }} />
        </IconButton>
      }
    />
  </Box>
</Box>

关键说明 #

• 外层容器设position: relative+height: 100vh，确保消息区域占满视口，输入框固定在底部。
• 消息滚动区域用height: calc(100% - 60px)预留输入框高度，List加pb: 8（MUI内置paddingBottom）避免消息被遮挡。
• 输入框容器用fixed定位+left:0; right:0自动适配视口宽度，通过padding调整与屏幕边缘的距离，避免溢出。
• 统一用MUI的sx属性替代行内style，更符合组件库规范且易维护。

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