当我使用Material时，如何让我的内容填充页面的其余部分？
当我使用Material时，如何让我的内容填充页面的其余部分？
提问于 2021-04-15 01:16:40
对于我的应用程序，我使用的是React和Material 。我希望站点利用下面的AppBar组件，但我不希望内容在整个页面上造成滚动；我希望我的内容占据最大的剩余高度和页面宽度。
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>我一直在尝试AppBar可用的AppBar(即"static" | "fixed" | "absolute" | "sticky" | "relative" | undefined )的不同组合，以及内容的不同高度和宽度，但组合似乎没有效果。
回答 2
Stack Overflow用户
发布于 2021-04-15 05:58:08
您可以尝试MUI的滚动钩子来锚定条形图：https://next.material-ui.com/components/app-bar/#elevate-app-bar，或者像我在这里使用的代码：https://codesandbox.io/s/mui-full-page-no-scroll-whecl?file=/demo.js一样将容器限制在窗口上。
Stack Overflow用户
发布于 2021-04-15 11:48:09
您可以使用sx={maxHeight:20 the表示appBar，使用80 the表示内容}}
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67100970
复制相关文章
相似问题
腾讯云开发者
