反作用力背景色全高 [英] React force background color full height

问题描述

我有一个呈现为

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下方有一个空白区域(灰白色的背景)，请参见附件.

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.

如何强制背景色填充窗口的100％?

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

推荐答案

您可以尝试使用height:100vh，而不是使用height:100%.使用％相对于父级高度，但使用vh相对于视口高度.因此，设为100vh将确保该块填满整个屏幕高度.

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.

您可以在此处

这篇关于反作用力背景色全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！