title: React force background color full height
body: <p>I have my App.js class which renders as</p>
  
  <pre><code>const theme = createMuiTheme({
    palette: {
      primary: lime,
      secondary: {
        ...grey,
        A400: '#00e677'
      },
      error: red
    }
  });
  
  class App extends Component {
  
    render() {
      const classes = this.props.classes;
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
            &lt;MyApp/&gt;
          &lt;/MuiThemeProvider&gt;
        &lt;/div&gt;
  
      );
    }
  
  
    }
  
    export default withStyles(styles)(App);
  </code></pre>
  
  <p>my root class has this style</p>
  
  <pre><code>const styles = theme =&gt; ({
    root: {
      width: '100%',
      height: '100%',
      marginTop: 0,
      zIndex: 1,
      overflow: 'hidden',
      backgroundColor: theme.palette.background.default,
    }
  });
  </code></pre>
  
  <p>I thought that by setting <code>height:'100%'</code> I'd had all my window filled, the problem is that I've got a blank space (wrt the grey background) below the <code>MyApp</code>'s div, see attached image.</p>
  
  <p>How can I force the background color to fill 100% of the window?</p>
  
  <p><a href="https://i.stack.imgur.com/ywVnR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ywVnR.png" alt="enter image description here"></a></p>