react / semantic-ui：如何获得全屏段

Question

我想构建一个像semantic-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

使用SUIR查看此example，source也可以使用。 masthead类在SUI示例中定义，并且不是框架的一部分，这些行为是使用自定义样式实现的：

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