Response / semantic-ui: how to get a full-screen segment

Question

I would like to build a layout, for example, an example semantic-ui website: http://semantic-ui.com/examples/homepage.html

The first vertical black segment is almost full height. This is done by the class masthead, but I do not understand where this class comes from.

I am using a reaction, so this is my layout so far:

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

But with this, the first segment does not have a full height.

Answer 1

SUIR, source avialable. masthead SUI , :

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