Question

我的App.js类呈现为

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

我的根类有这种风格

height:'100%'

我认为通过设置MyApp我已经填满了所有窗口，问题是我在{{1}}下面有一个空白区域（灰色背景）＆＃39; div，见附图。

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

GroupBy.size

Answer 1

您可以尝试height:100%，而不是使用height:100vh。使用％相对于父高度，但使用vh是相对于视口的高度。因此，制作100vh将确保块填满屏幕的所有高度。

您可以阅读有关here

的更多信息

Answer 2

这是Temani Afif答案的一个版本。

我在React中使用Grommet。
为了用主题背景填充整个屏幕（深色！），我设置了样式提供者HOC的样式，因此：

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

然后，在render()中，我写道：

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

出于性能原因，建议在render()之外应用样式。

反作用力背景颜色全高

2 个答案: