相关疑难解决方法(0)

我试图<div>在CSS中设置一个特定的百分比高度,但它只是保持与其中的内容相同的大小.<!DOCTYTPE html>但是,当我删除HTML 5 时,它可以工作,根据<div>需要占用整个页面.我希望页面验证,所以我该怎么办？

我有这个CSS <div>,其ID为page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

我有我的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%的窗口？