réagissent/sémantique-ui: Comment obtenir un segment plein écran

Question

Je voudrais construire une mise en page comme l'exemple la page d'accueil de-ui sémantique: http://semantic-ui.com/examples/homepage.html

Le premier segment noir vertical a une hauteur presque plein. C'est fait par la classe masthead, mais je ne comprends pas d'où vient cette classe.

J'utilise réagir, c'est donc ma mise en page jusqu'à présent:

render() { 
    return (
     <div> 
      <Segment vertical inverted> 
       <p>Main</p> 
      </Segment> 
      <Segment vertical> 
       <p>First</p> 
      </Segment> 
     </div> 
    ) 
} 

Mais avec ce premier segment n'a pas pleine hauteur.

Answer 1

Jetez un oeil sur ce example avec SUIR, source est également disponible. masthead classe est définie dans l'exemple SUI et ne fait pas partie du cadre, ce comportement a été mise en œuvre avec un style personnalisé:

<Segment 
    inverted 
    textAlign='center' 
    style={{ minHeight: 700, padding: '1em 0em' }} 
    vertical 
>