反應/語義的UI：如何獲得全屏段

Question

我想建立一個佈局像語義UI的主頁例子：http://semantic-ui.com/examples/homepage.html

第一豎直黑色分割有近滿高度。這是由masthead課完成的，但我不明白這門課是從哪裏來的。

我使用的反應，所以這是我的佈局至今：

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

但與此第一段不具有完全的高度。

Answer 1

看看這個example與SUIR，source也avaplable。 masthead類是在SUI示例中定義的，不是框架的一部分，這些行爲是用自定義樣式實現的：

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