反作用力背景颜色全高

Question

我有我的App.js类呈现为

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

我的根类有这种风格

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

我认为通过设置height:'100%'我已经填满了所有窗口,问题是我MyApp的div 下面有一个空白区域(灰色背景),见附图.

如何强制背景颜色填充100%的窗口？

Answer 1

而不是使用height:100%你可能会尝试height:100vh.使用%相对于父高度,但使用vh是相对于视口的高度.因此,制作100vh将确保块填满屏幕的所有高度.

你可以在这里阅读更多信息