如何在MUI 5中将Box组件固定在页面底部

问题分析 #

当前代码的核心问题是输入框与消息区处于同一个容器内，且容器高度设置未正确适配视口，导致无法实现输入框固定底部、消息区滚动的效果。以下是修正后的完整实现：

修正后的代码 #

import { Box, Button, Container, TextField, Typography } from '@mui/material';
import { useState } from 'react';

import Header from './header';
import Nav from './nav';

const APP_BAR_MOBILE = 64;

const DashboardLayout = () => {
    const [open, setOpen] = useState(false);
    // 模拟聊天消息，区分用户和对方消息
    const messages = [
        { text: '你好！', isUser: false },
        { text: '我想咨询一下布局问题', isUser: true },
        { text: '没问题，我帮你解决', isUser: false },
    ];

    return (
        <Box
            sx={{
                display: 'flex',
                height: '100vh', // 占满整个视口高度
                overflow: 'hidden',
            }}
        >
            <Nav openNav={open} onCloseNav={() => setOpen(false)} />
            <Header onOpenNav={() => setOpen(true)} />
            <Container
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    height: '100%',
                    paddingTop: `${APP_BAR_MOBILE + 24}px`,
                    paddingBottom: 2,
                    boxSizing: 'border-box',
                }}
            >
                {/* 可滚动的聊天消息区 */}
                <Box
                    sx={{
                        flexGrow: 1, // 占满剩余空间
                        overflowY: 'auto', // 垂直滚动
                        backgroundColor: 'pink',
                        padding: 2,
                        marginBottom: 2,
                    }}
                >
                    {messages.map((msg, index) => (
                        <Box
                            key={index}
                            sx={{
                                display: 'flex',
                                justifyContent: msg.isUser ? 'flex-end' : 'flex-start',
                                marginBottom: 1,
                            }}
                        >
                            <Box
                                sx={{
                                    backgroundColor: msg.isUser ? '#007bff' : '#e9ecef',
                                    color: msg.isUser ? 'white' : 'black',
                                    padding: 1.5,
                                    borderRadius: 2,
                                    maxWidth: '70%',
                                }}
                            >
                                <Typography>{msg.text}</Typography>
                            </Box>
                        </Box>
                    ))}
                </Box>

                {/* 固定在底部的输入框区域 */}
                <Box 
                    sx={{
                        display: 'flex',
                        gap: 1,
                        width: '100%',
                    }}
                >
                    <TextField 
                        fullWidth 
                        size='small' 
                        variant='outlined' 
                        autoFocus 
                        placeholder='输入消息...'
                    />
                    <Button variant='contained'>发送</Button>
                </Box>
            </Container>
        </Box>
    );
};

export default DashboardLayout;

关键修改说明 #

• 根容器高度：将最外层Box的height设为100vh，确保布局占满整个浏览器视口高度。
• Container布局：使用flexDirection: 'column'垂直排列消息区和输入框，boxSizing: 'border-box'避免padding导致容器溢出。
• 消息区设置：通过flexGrow: 1让消息区自动填充剩余空间，overflowY: 'auto'实现垂直滚动，同时添加内边距优化排版。
• 消息对齐：通过justifyContent属性控制消息居左/居右，配合背景色区分用户与对方消息，限制最大宽度避免过长消息撑满屏幕。
• 输入框固定：输入框所在Box不设置position，依靠Flex布局的特性自动固定在容器底部，同时设置width: '100%'确保自适应宽度。

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