Creation of full-size main content with elements of interaction with siding with a UI interface
I am trying to get a Webapp to react using Semantic Ui components. However, I'm really struggling to make the main content component take up a full-size screen (see image). I want the main content component to fill the rest of the space, but it seems like it takes up as much space as it needs. Ultimately, I want the sidebar to be sticky and scroll to 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 applying the inline style {height:100%}
to everything from the hierarchy to the root component, but nothing makes it populate the rest of the page. I know this seems like such a simple problem, but I'm stuck haha. Any ideas?
Cheers desired result
source to share
The sidebar will have the same height as the enclosing div. It looks like you want the content to stretch exactly 100%. If so, you can set the height on the enclosing div to "100vh".
<div style={{height: '100vh'}} />
If you want the height to be higher, you can set the minimum 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>
source to share