我的React应用程序中有一个非常简单的问题。如何删除页面中的滚动条?我认为这是因为我设置的高度100vh
。但是,如果我删除AppBar
,滚动条就会消失。我如何解决这个问题?
请检查我的代码和框在这里Click here
<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>
3条答案
按热度按时间2q5ifsrm1#
您已经为您的
main
节设置了height: 100vh
。并且AppBar
节不在main
节中。如果您想删除滚动条,您需要删除AppBar
的高度,即64px
,当您为main
节设置height
时:8fq7wneg2#
有两种方法可以做到这一点。
第一种方法是在material-ui
Appbar
中添加position="fixed"
属性。它将使标题固定,其他元素将相应地调整。但是为了保持UI不变,添加填充等于Appbar
高度(大约64 px)。第二种方法是将
paddingTop
添加到Grid
容器中,等于Appbar
高度,保持position="static"
prop 不变。或者另一种方法是从总高度中减去appbar高度,即:"calc(100vh - 64px)"
这里的重点是降低静态appBar的Grid容器中appbar的高度
mlmc2os53#
AppBar大小(高度)可能不总是64px,也许在您的情况下它的罚款。
就我而言
已修复此问题。
如果这在您的情况下不起作用,则可能是其他样式影响了结果。
对于上下文,我还有以下样式
其中**#root是ID为root**的主(根)div,React在其中呈现所有组件