Как разделить ящик материала-интерфейса на верхний, основной и нижний разделы?

Question

Я использую ящик с пользовательским интерфейсом материала и хочу разделить его на 3 секции следующим образом:

• header => # зафиксирован сверху
• main => # самый большой раздел, который можетпрокручиваться
• нижний колонтитул => # фиксируется внизу

, поэтому я использую этот псевдокод:

return (
        <Wrapper>
            <Drawer variant="permanent" anchor="right">                
                Header
            </Drawer>
            <Drawer variant="permanent" anchor="right">                
                Main
            </Drawer>
            <Drawer variant="permanent" anchor="right">
                Footer
            </Drawer>
        </Wrapper>
    );

наконец, я хочу ящик, как показано ниже: https://material -app.bootlab.io