全高页面问题，底部页面有白条

Question

Hi i have problem with my react app. I am trying to make page at 100% height but when i set :

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

this make my html at 100% height but my body is at height 100% - 5px... I am trying to figure why but i don't know.

I checked the source in browser. Tried set up body height to 100%!important.. nothing helps... Also when i checked the size of html and body element in browser tools it look like it has same height but body has lesser height in that blue square what chrome shows you on hover.

My App.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}} this is my background)

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

In my opinion these problem was caused by some grid setup in my code. Anyway it works now.

Answer 2

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