How can I have my content fill in the remainder of the page when I'm using Material UI AppBar?

user_12475182 0
Viewed 538

I am using React and Material UI React for my application. I want the site to utilize the AppBar component with content below, but I don't want the content to cause scrolling on the entire page; I want my content to take up the maximum remaining height and the page width.

Layout.tsx:

<AppBar position="static" component="header">
  <Toolbar>
    <Logo className={classes.logo} />
    <div className={classes.grow} />
    <IconButton className={classes.avatar} edge="end">
      <Avatar />
    </IconButton>
  </Toolbar>
</AppBar>
<Container className={classes.content} component="main">
  {props.children}
</Container>

I've been trying different combinations of the available position for the AppBar, which are "static" | "fixed" | "absolute" | "sticky" | "relative" | undefined, along with different heights and widths for the content, but no combination seems to work.

material-ui typescript reactjs css
2 Answers
user_40966140

You can use sx={{maxHeight: 20vh for appBar and 80vh for the content}}

<AppBar position="static" component="header" sx={{maxHeight:20vh}}>
  <Toolbar>
    <Logo className={classes.logo} />
    <div className={classes.grow} />
    <IconButton className={classes.avatar} edge="end">
      <Avatar />
    </IconButton>
  </Toolbar>
</AppBar>
<Container className={classes.content} component="main" sx={{maxHeight:80vh}}>
  {props.children}
</Container>
user_131112700
Related