Scrollbar Appearing in React App When There is AppBar in Material UI

Question

I have a very simple problem in my React app. How can i remove the scrollbar in my page? I think this is because of the height that i put which is 100vh. However, if i remove the AppBar, the scrollbar disappears. How would i fix this problem?

Pls check my codesandbox here 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>

Answer 1

You have set height: 100vh for your main section. And the AppBar section is out of the main section. If you want to remove scrollbar, you need to remove the height of the AppBar, which is 64px, when you set height for the main section:

height: calc(100vh - 64px);