反应/语义的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 
>