reactjs - style - react unmount component

React-Componente Pantalla completa(con altura 100%)

Question

Estoy atascado con mostrar un componente React llamado "home" que ocupa el 100% de la altura de mi pantalla. Lo que sea que use CSS o el estilo en línea React no funciona.

En el ejemplo a continuación, html , body y #app están configurados en altura: 100% en CSS. Para .home usé estilo en línea (pero lo que sea que utilicé CSS o estilo en línea es el mismo): El problema parece provenir de <div data-reactroot data-reactid=''1''> que no está configurado con altura: 100%.

Si lo hackeé con la herramienta de desarrollo Chrome, es un trabajo:

Entonces, ¿cuál es la forma correcta de mostrar un componente de altura completa en React?

Cualquier ayuda es bienvenida :)

Answer 1

Me molesta por días. Y finalmente hago uso del selector de propiedades CSS para resolverlo.

[data-reactroot] 
        {height: 100% !important; }

Answer 2

Si bien esta puede no ser la respuesta ideal, intente esto:

style={{top:''0'', bottom:''0'', left:''0'', right:''0'', position: ''absolute''}}

Mantiene el tamaño adherido a los bordes, que no es lo que usted quiere pero le da un efecto similar.

Answer 3

También podrías hacer:

body > #root > div {
  height: 100vh;
}

Answer 4

Trate de usar! importante en altura. Probablemente es debido a algún otro estilo que afecta a su cuerpo html.

{ height : 100% !important; }

también puede dar valores en VP que establecerán la altura para ver el píxel del puerto que menciona como height : 700vp; Pero esto no será portátil.

Answer 5

intente <div style = {{height:"100vh"}}> </div>

Answer 6

body{
 height:100%
}

#app div{
height:100%
}

esto funciona para mi ..

Answer 7

html, body, #app, #app>div {
  height: 100%
}

Esto asegurará que toda la cadena sea height: 100%