Проблема с полноразмерной страницей, белая полоса внизу страницы

Question

Привет, у меня проблема с моим приложением реакции. Я пытаюсь сделать страницу на высоте 100%, но когда я устанавливаю:

/* Global CSS styles */
html,body, #root{
    height:100%; //i tried wh too
    min-height: 100%;
}

, это делает мой html на высоте 100%, но мое тело на высоте 100% - 5px ... Я пытаюсь понять почему, но я не знаю.

Я проверил источник в браузере. Попробовал установить высоту тела на 100%! Важно ... ничего не помогает ... Также, когда я проверил размер html и элемент тела в инструментах браузера, он выглядел так, как будто он имеет такую ​​же высоту, но тело имеет меньшую высоту в этом синем квадрате, что chrome показывает вас при наведении.

Мое приложение. js:

function App(props) {
  return (
    <>
      <CssBaseline />
      <BrowserRouter>
        <MuiThemeProvider theme={ApplicationTheme}>
          <Application />
        </MuiThemeProvider>
      </BrowserRouter>
    </>
  );
}

myApplication. js :

function Application(props) {
  const [username, setUserame] = useState(null);

  async function query() {
    const result = await Auth.currentAuthenticatedUser();
    setUserame(result.username);
  }

  useEffect(() => {
    query();
  }, []);

  return (
    <div style={{ height: "100vh" }}>
      {/* Route TopBar null=== custom on page */}
      <Switch>
        <Route
          path="/*"
          render={props => <ModelSelectorPage {...props} username={username} />}
        />
      </Switch>
    </div>

myModelSelectorPage: ( backgroundColor: theme.palette.primary.main}} это мой фон)

function ModelSelectorPage(props) {

    const useStyles = makeStyles({
        root: {
            [theme.breakpoints.down('sm')]: {
                backgroundColor:"red",
                alignItems:"flex-end!important"
            },
        },
    });

    const classes = useStyles();

    function getUserRoles(){
        let userRoles = [];

        userRoles.push("user");
        userRoles.push("administrator");
        userRoles.push("parrent");
        userRoles.push("teacher");

        return userRoles;
    }

    const items = [];
     let userRoles = getUserRoles();
        for(let i = 0; i < userRoles.length;i++){
            items.push(
                <Grid item key={i} xl={2} lg={2} md={3} sm={6} xs={12}
                >
                    <UserModeCard userRole={userRoles[i]}></UserModeCard>
                </Grid>
            );
        }
    return(
        <Grid container
              className={classes.root}
              direction="row"
              justify="center"
              alignItems="center"
              spacing={10}
              style={{ minHeight: '100vh', backgroundColor:theme.palette.primary.main}}
              >
            {items}
        </Grid>
    )
}

export default withRouter(ModelSelectorPage);

Answer 1

По моему мнению, эта проблема была вызвана некоторой настройкой сетки в моем коде. Во всяком случае, теперь это работает.

Answer 2

{
 margin:0;
 padding:0;
 height:100%;
}