如何基于MUI创建占满浏览器窗口且无滚动条的响应式页面

问题背景 #

想要基于MUI（Material UI）创建一个占满浏览器窗口且无滚动条的响应式网页，编写了以下代码，但红色Paper区域显示后页面出现了垂直滚动条，求错误原因及解决办法：

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://localhost:8000/dist/index.css" type="text/css" media="all" />
    </head>
    <body>
        <div id="app" ></div>
        <script src="http://localhost:8000/dist/index.js" type="module"></script>
    </body>
</html>

JavaScript代码 #

import React from "react";
import {createRoot} from "react-dom/client";

import {Paper, AppBar, Toolbar, Typography} from "@mui/material";

const App = ({}) => {
    return <>
            <AppBar position="static">
               <Toolbar>
                   <Typography>Test</Typography>
               </Toolbar>
            </AppBar>

            <Paper sx={{backgroundColor: "red", height: "100vh", width: "100%"}}>
                <Typography>Test</Typography>
            </Paper>
            </>;
    }

createRoot(document.querySelector("#app")).render(<App />);

问题原因 #

核心问题是页面总高度超出了浏览器视口：

• 你给Paper设置了height: 100vh，这会让它占满整个视口高度，但页面上方还有一个AppBar（包含Toolbar），默认会占据64px的垂直空间，两者叠加后总高度超过了100vh，触发滚动条。
• 另外，浏览器默认的html和body标签带有margin或padding，也会额外增加页面高度，加剧这个问题。

解决办法 #

提供三种可行的修复方案，按需选择：

方案1：重置全局默认样式 #

先消除html、body和根容器的默认边距，确保它们占满视口且不溢出：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
}

方案2：手动计算Paper高度 #

直接用calc减去AppBar的默认高度（64px），让Paper刚好填充剩余视口：

<Paper sx={{backgroundColor: "red", height: "calc(100vh - 64px)", width: "100%"}}>
    <Typography>Test</Typography>
</Paper>

方案3：使用Flex布局自动适配（推荐） #

用MUI的Box组件构建垂直Flex布局，让Paper自动填充AppBar之外的剩余空间，无需硬编码高度：

import React from "react";
import {createRoot} from "react-dom/client";
import {Paper, AppBar, Toolbar, Typography, Box} from "@mui/material"; // 引入Box

const App = () => {
    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
            <AppBar position="static">
                <Toolbar>
                    <Typography>Test</Typography>
                </Toolbar>
            </AppBar>
            <Paper sx={{ backgroundColor: "red", flex: 1, width: "100%" }}>
                <Typography>Test</Typography>
            </Paper>
        </Box>
    );
}

createRoot(document.querySelector("#app")).render(<App />);

这种方式更灵活，适配不同屏幕尺寸和自定义AppBar高度的场景。

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