Tengo mi clase App.js que se representa como

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

Mi clase raíz tiene este estilo

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

Pensé que al configurar height:'100%' había llenado toda mi ventana, el problema es que tengo un espacio en blanco (con el fondo gris) debajo del div de MyApp, ver imagen adjunta .

¿Cómo puedo forzar que el color de fondo ocupe el 100% de la ventana?

enter image description here

4
r4id4 12 nov. 2017 a las 14:11

2 respuestas

La mejor respuesta

En lugar de usar height:100%, puede probar height:100vh. El uso de% es relativo a la altura principal, pero el uso de vh es relativo a la altura de la ventana gráfica. Entonces, hacer 100vh asegurará que el bloque llene toda la altura de la pantalla.

Puede leer más sobre aquí

12
Temani Afif 28 ene. 2019 a las 15:43

Esta es una versión de la respuesta de Temani Afif.

Yo uso Grommet en React.
Para llenar toda la pantalla con el fondo de mi tema (¡oscuro!), Diseñé el proveedor de estilo HOC así:

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

Luego, en render() escribí:

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

Se recomienda aplicar el estilo fuera de render() por motivos de rendimiento.

0
Juan Lanus 14 mar. 2019 a las 01:15