Material UI中有AppBar时React App中出现滚动条答案

【问题标题】：Scrollbar Appearing in React App When There is AppBar in Material UIMaterial UI中有AppBar时React App中出现滚动条
【发布时间】：2021-02-21 15:37:49
【问题描述】：

我的 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>

【问题讨论】：

标签： css reactjs material-ui react-hooks styled-components

【解决方案1】：

有两种方法可以做到这一点。
首先是在material-ui Appbar 中简单地添加position="fixed" 属性。它将使标题固定，其余其他元素将相应调整。但是为了保持 UI 相同，添加填充等于 Appbar 高度（大约 64 像素）。

第二种方法是将paddingTop 添加到Grid 容器等于Appbar 高度，保持position="static" 属性相同。或者另一种方法是从总高度中减去应用栏高度，即； "calc(100vh - 64px)"

重要的一点是从 Grid 容器中减少静态 appBar 的 appbar 高度

【讨论】：

【解决方案2】：

您已为 main 部分设置了 height: 100vh。 AppBar 部分不在 main 部分中。如果要移除滚动条，则需要在为main 部分设置height 时，移除AppBar 的高度，即64px：

height: calc(100vh - 64px);

【讨论】：