2016-07-18 152 views
16

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.React - Componente Schermo intero (con altezza 100%)

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): enter image description here 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: enter image description here

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

Qualsiasi aiuto è benvenuto :)

+0

Il componente ' 'è ciò che sta creando questo div w con un reactid. Quindi è necessario aggiungere una classe o uno stile ad esso. per esempio. '' – jzm

+0

Grazie mille avevi ragione, ho appena dimenticato un componente superiore ..! –

risposta

0

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.

18

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

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

Dovrebbe la risposta accettata. Per essere sicuro di aggiungere: 'position: absolute; larghezza: 100%! Importante; altezza: 100%! Important; ' – Yousphere

+2

Funziona, ma può causare problemi con altri componenti. Ci deve essere un modo più "corretto" per farlo. – SomethingOn

1
body{ 
height:100% 
} 

#app div{ 
height:100% 
} 

questo funziona per me ..

+0

Questo renderà ** tutte le div ** ovunque sotto '# app' avere altezza 100%. Potresti voler usare '#app> div', selezionando solo le div secondarie immediate di' # app' –

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

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

+5

Mentre questo codice può rispondere alla domanda, fornendo un ulteriore [contesto] (https://meta.stackexchange.com/q/114762) per quanto riguarda _how_ e/o _why_ risolve il problema, migliorerebbe il valore a lungo termine della risposta. Inoltre non fa male menzionare perché questa risposta sia più appropriata di altre. –

1

Si potrebbe anche fare:

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