How to make fixed header and footer?

Question

React

Hello.
I want to make the following interface in react using semantic ui:

1. When the sidebar is hidden, its place is filled, the rest of the elements
2. The header, breadcrumb, footer elements must always be on the screen, i.e. fixed
3. When the content element is filled in height, only it should scroll.

Here is what I have:

main.js code

import React from 'react';
import {Sidebar, Menu, Segment} from "semantic-ui-react"


class MainPage extends React.Component {
    state = {
        sidebarVisible : true
    }
    menuClick = (e) => {
        console.log(e.target.dataset['route'])
    }
    toggleSidebar = () => {
        this.setState({sidebarVisible: !(this.state.sidebarVisible)})
    }

    menuClick = () => {
        this.toggleSidebar();
    }
    render() {
        return <Sidebar.Pushable as='segment'>
                <Sidebar
                    visible={this.state.sidebarVisible}
                    as={Menu}
                    animation='push'
                    vertical
                    width='thin'
                >
                    <Menu.Header>
                        System
                    </Menu.Header>
                    <Menu.Item onClick={this.menuClick} data-route='item1 route'>
                        Home
                    </Menu.Item>
                    <Menu.Item onClick={this.menuClick}>
                        Records
                    </Menu.Item>
                    <Menu.Item onClick={this.menuClick}>
                        Calculator
                    </Menu.Item>
                    <Menu.Item onClick={this.menuClick}>
                        Calendar
                    </Menu.Item>
                </Sidebar>
                <Sidebar.Pusher>
                        <Segment basic inverted fixed='top'>
                            Header
                        </Segment>
                    <Segment basic >
                        Bread
                    </Segment>
                    <Segment basic  style={{minHeight:1000,}}>
                        Content<br/>
                        asdf
                    </Segment>
                        <Segment basic inverted>
                            Header
                        </Segment>
                </Sidebar.Pusher>
            </Sidebar.Pushable>
    }
}
export default MainPage;

I just can’t understand how to make such an interface using semantic ui or do I need to add css?