css - react/semantic-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

用 SUIR看看这个例子，源代码也是可用的。masthead类在 SUI 示例中定义并且不是框架的一部分，这些行为是通过自定义样式实现的：

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