Css 当我'；我在使用材料UI AppBar？

我正在为我的应用程序使用React和Material UI React。我希望该网站利用

AppBar

组件提供以下内容，但我不希望内容导致整个页面滚动；我希望我的内容占据最大剩余高度和页面宽度

布局。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>

{props.children}

---

我一直在尝试

AppBar

可用

位置的不同组合，它们是
“静态”|“固定”|“绝对”|“粘性”|“相对”|未定义的
，以及内容的不同高度和宽度，但是组合似乎不起作用。
您可以尝试使用MUI的滚动钩来锚定条：，或者像我在这里对代码所做的那样将容器约束到窗口：。
您可以使用sx={{maxHeight:20vh用于appBar，80vh用于内容}

<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>


{props.children}