Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to create an application layout with React MUI?

I want to create an application layout for my app relying on React MUI. The layout should be

  • Toolbar
  • Page content ( stretched across page )
  • Footer ( at bottom, pushed by page content )

which looks like

enter image description here

I started with ( sandbox: https://stackblitz.com/edit/react-xg78wu?file=Demo.tsx )

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

export default function Demo() {
  return (
    <>
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
        <AppBar position="static">
          <Toolbar>Logo</Toolbar>
        </AppBar>
        <Container sx={{ flexGrow: 1 }}>Page content goes here</Container>
        <Container>The footer at the bottom</Container>
      </Box>
    </>
  );
}

Unfortunately the main content is not stretching across the page. I also tried to use a grid ( https://stackblitz.com/edit/react-xg78wu-sixzuf?file=Demo.tsx )

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid2';

export default function Demo() {
  return (
    <Grid container direction="column">
      <AppBar position="static">
        <Toolbar>Logo</Toolbar>
      </AppBar>
      <Container sx={{ flexGrow: 1 }}>Page content goes here</Container>
      <Container>The footer at the bottom</Container>
    </Grid>
  );
}

but that didn’t help. What is wrong or missing?

Tags:

2

Answers


  1. 0

    The issue occurs because the AppBar component from Material-UI typically has a fixed position by default, causing the content underneath to appear hidden. To resolve this, you can add some top padding or margin to your main content container (or to the parent .checking01 div) to account for the height of the AppBar.

    HTML

    <div className="completePage">
     <AppBar className="appBar">
     <Toolbar>Logo</Toolbar>
     </AppBar>
     <Container className="content">Page content goes here</Container>
     <Container className="footer">The footer at the bottom</Container>
</div>

    css

    .completePage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 64px;
}

.appBar {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
}

.content {
  flex: 1;
}

.footer {
  flex: 0 1 auto;
}
    Login or Signup to reply.
  2. 0

    Set the height of your wrapper element to be the full height of the viewport 100vh, and ensure that you don’t have any margin or padding on the body/html elements

    // Note: you should set the margin on the `body` element to be 0
export default function Demo() {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <AppBar position="static">
        <Toolbar>Logo</Toolbar>
      </AppBar>
      <Container sx={{ flexGrow: 1 }}>Page content goes here</Container>
      <Container>The footer at the bottom</Container>
    </Box>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search