有两种方法可以做到这一点
首先是简单地在材料ui
第二种方法是将
我的React应用程序中有一个非常简单的问题。如何删除页面中的滚动条？我想这是因为我放的高度是100vh。但是，如果我删除AppBar，滚动条就会消失。我该如何解决这个问题？
请在这里查看我的代码沙盒点击这里
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">News</Typography>
</Toolbar>
</AppBar>
<Grid container component="main" className={classes.root}>
<CssBaseline />
<Grid item xs={false} sm={4} md={7} className={classes.image} />
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Box mt={5}>
<Copyright />
</Box>
</form>
</div>
</Grid>
</Grid>
</div>
您已经为main节设置了height: 100vh。并且AppBar区段在main区段之外。如果要删除滚动条，则在为main部分设置height时，需要删除AppBar的高度，即64px：
height: calc(100vh - 64px);
首先是简单地在材料ui
Appbar中添加position="fixed"道具。它将使页眉固定，其他元素将相应地进行调整。但是为了保持UI相同，添加的填充等于Appbar的高度(大约64px(。第二种方法是将
paddingTop添加到Grid容器，等于Appbar高度，保持position="static"道具不变。或者另一种方式是从总高度减去appbar高度，即；"calc(100vh - 64px)"
重要的一点是减少静态appbar 的网格容器中的appbar高度
AppBar的大小(高度(可能并不总是64px，在您的情况下可能很好。
就我而言，
<AppBar position="sticky">
修复了问题。
如果这在你的情况下不起作用，可能会有其他样式影响结果。
就上下文而言，我还有以下样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #root {
height: 100%;
width: 100%;
}
其中#root是id为rootReact渲染所有组件的主(根(div
ReactDOM.createRoot(document.getElementById('root'));