Making full-size main content with semantic-UI Sidebar react components

Question

I'm trying to make a Webapp with react using Semantic Ui components. However, I'm really struggling to make the main content component take up the full-size of the screen (see image). I want the main content component to fill up the rest of the space but it seems like it's only taking up as much space as it needs to. Ultimately I want to be able to have the sidebar sticky and only scroll the main content

render() {
const { visible } = this.state
return (
  <div>
    <Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
    <Sidebar.Pushable as={Segment}>
      <Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
        <Menu.Item name='home'>
          <Icon name='home' />
          Home
        </Menu.Item>
        <Menu.Item name='gamepad'>
          <Icon name='gamepad' />
          Games
        </Menu.Item>
        <Menu.Item name='camera'>
          <Icon name='camera' />
          Channels
        </Menu.Item>
      </Sidebar>
      <Sidebar.Pusher>
        <Segment basic>
          <Header as='h3'>Application Content</Header>
          <Image src='/assets/images/wireframe/paragraph.png' />
        </Segment>
      </Sidebar.Pusher>
    </Sidebar.Pushable>
  </div>
)
}

I've tried to apply the style inline {height:100%} to everything from within the up the hierarchy to the root component but nothing seems to make it fill the rest of the page. I know that this seems like such a simple problem, but I'm stuck haha. Any ideas?

Cheers desired outcome

Answer 1

The sidebar will take the same height as its enclosing div. It looks like you want the content to stretch to exactly 100% of the viewport. If this is the case, you can set height on the enclosing div to '100vh'.

<div style={{height: '100vh'}} />

If you want the height to possibly go beyond, you can set min-height to '100vh'.

<div style={{minHeight: '100vh'}} />

If you want it to just take up the rest of the page before or after some other content, you can do the following:

<div style={{minHeight: '100vh', display: 'flex', flexFlow: 'column nowrap'}}>
    <div>Content Before</div>
    <div style={{flex: 1}}>
        Main Content with Sidebar
    </div>
    <div>Content After</div>
</div>