React - Componente Schermo intero (con altezza 100%)

Question

Sono bloccato con la visualizzazione di un componente React denominato "home" che occupa il 100% dell'altezza dello schermo. Qualunque cosa io usi lo stile in linea CSS o React, non funziona.

Nell'esempio che segue, html, corpo e #app sono impostati altezza: 100% in CSS. Per .home Ho usato lo stile inline (ma qualsiasi cosa abbia usato CSS o stile in linea è lo stesso): Il problema sembra venire da <div data-reactroot data-reactid='1'> che non è impostato con altezza: 100%.

Se ho inciso con strumento di sviluppo Chrome, è un lavoro:

Allora, qual è il modo corretto per visualizzare un componente tutta altezza in Reagire?

Qualsiasi aiuto è benvenuto :)

Answer 1

provare a utilizzare! Importante in altezza. Probabilmente è a causa di qualche altro stile che riguarda il tuo corpo html.

{ height : 100% !important; } 

anche si può dare valori di VP che fisseranno altezza per Viėe pixel porto si parla come height : 700vp; ma questo non sarà in portatile.

Answer 2

Mi dà fastidio per giorni. E infine uso il selettore di proprietà CSS per risolverlo.

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

Answer 3

body{ 
height:100% 
} 

#app div{ 
height:100% 
} 

questo funziona per me ..

Answer 4

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

questo garantirà tutta la catena di essere height: 100%

Answer 5

Si potrebbe anche fare:

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