React force background color full height

Question

I have my App.js class which renders as

const theme = createMuiTheme({
  palette: {
    primary: lime,
    secondary: {
      ...grey,
      A400: '#00e677'
    },
    error: red
  }
});

class App extends Component {

  render() {
    const classes = this.props.classes;

    return (
      <div className={classes.root}>
        <MuiThemeProvider theme={theme}>
          <MyApp/>
        </MuiThemeProvider>
      </div>

    );
  }


  }

  export default withStyles(styles)(App);

my root class has this style

const styles = theme => ({
  root: {
    width: '100%',
    height: '100%',
    marginTop: 0,
    zIndex: 1,
    overflow: 'hidden',
    backgroundColor: theme.palette.background.default,
  }
});

I thought that by setting height:'100%' I'd had all my window filled, the problem is that I've got a blank space (wrt the grey background) below the MyApp's div, see attached image.

How can I force the background color to fill 100% of the window?

Answer 1

Instead of using height:100% you may try height:100vh. Using % is relative to the parent height but using vh is relative to the height of the viewport. So making 100vh will ensure that the block fill all the height of the screen.

You can read more about here

Answer 2

This is a version of Temani Afif's answer.

I use Grommet within React.
To fill the whole screen with my theme background (dark!) I styled the style provider HOC thus:

  import styled from 'styled-components';
  FillGrommet = styled( Grommet )`min-height: 100vh;`;

then, in render() I wrote:

    return (
      <this.FillGrommet theme={ dark }>
        <AppBar /  
        ...

It is recommended to apply the style outside render() for performance reasons.