Блог

У меня очень простая проблема в моем приложении React. Как я могу удалить полосу прокрутки на своей странице? Я думаю, это из-за высоты, которую я поставил, которая есть 100vh . Однако, если я удалю AppBar , полоса прокрутки исчезнет. Как мне решить эту проблему?

Пожалуйста, проверьте мой codesandbox здесь, нажмите здесь

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

Вы установили height: 100vh для своего main раздела. И AppBar раздел находится вне main раздела. Если вы хотите удалить полосу прокрутки, вам нужно удалить высоту AppBar , которая есть 64px , когда вы устанавливаете height для main раздела:

 height: calc(100vh - 64px); 
  

это можно сделать двумя способами.
Сначала нужно просто добавить position="fixed" реквизит в material-ui Appbar . Заголовок будет исправлен, а остальные другие элементы будут соответствующим образом скорректированы. Но чтобы сохранить пользовательский интерфейс таким же, добавьте отступ, равный Appbar высоте (около 64 пикселей).

Второй способ — просто добавить paddingTop в Grid контейнер значение, равное Appbar высоте, сохраняя position="static" неизменной опору. или другой способ — уменьшить высоту панели приложений от общей высоты, т.е; "calc(100vh - 64px)"

Важным моментом здесь является уменьшение высоты панели приложений из контейнера сетки для статической панели приложений

Размер (высота) панели приложений не всегда может быть 64px, возможно, в вашем случае это нормально.

В моем случае

 <AppBar position="sticky">
  

исправлена проблема.

Если в вашем случае это не сработает, возможно, на результат влияет какой-то другой стиль.

Для контекста у меня также есть следующие стили

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, #root {
    height: 100%;
    width: 100%;
}
  

Где #root — это основной (корневой) div с идентификатором root, где React отображает все компоненты

 ReactDOM.createRoot(document.getElementById('root'));