reactjs - 如何为 Material-UI SPA 的内容动态使用全屏高度?
问题描述
我正在寻找为 SPA 设置页面布局的最佳方式,该 SPA 由AppBar
顶部的静态标题 ( ) 和标题下方的动态页面内容组成。页面内容ScreenSizePage
有时(但不总是)应该具有与屏幕剩余高度完全匹配的高度。换句话说:在 Material-UI 应用程序中,仅使div
in的高度ScreenSizePage
完全适合剩余屏幕高度的最佳方法是什么?
索引.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import {ThemeProvider} from '@material-ui/styles';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
import theme from './theme';
ReactDOM.render(
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<App />
</BrowserRouter>
</ThemeProvider>,
document.querySelector('#root'),
);
应用程序.tsx:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import AppBar from './AppBar';
import HomePage from './pages/HomePage';
import {ScreenSizePage} from './pages/ScreenSizePage';
export default function App() {
return (
<div>
<AppBar />
<Switch>
<Route exact={true} path="/" component={HomePage} />
<Route path="/ScreenSizePage" component={ScreenSizePage} />
</Switch>
</div>
);
}
AppBar.tsx:
import React from 'react';
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme: Theme) => createStyles({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
}));
export default function DenseAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar variant="dense">
{/* ... */}
<Typography variant="h6" color="inherit">
Home
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
主页.tsx:
import React from 'react';
export default function HomePage() {
return (
<div>This page can have any height</div>
);
}
ScreenSizePage.tsx:
import React from 'react';
export default function ScreenSizePage() {
return (
<div>This page should use the remaining page height</div>
);
}
解决方案
您可以使用 CSS flexbox 或“calc”函数来实现这一点。“flex-grow”将使内容适合剩余空间。下面的代码框。我已经用“calc”注释掉了部分
推荐阅读
- spring-boot - 使用 Multiline 解析器在 Fluentd 中解析 Spring boot 的 Stacktrace 日志时出错
- android - 如何在片段内单击按钮时更改按钮可绘制色调颜色
- yocto - 如何找到哪个配方提供 RPM(或 DEB 或 IPK)包?
- java - Java 8 等效于图像类型 + java 8 的 Curl 文件上传
- ios - 如何在swift 5中弹出和关闭视图
- apache-spark - 是否可以使用 HADOOP YARN 运行任何应用程序或程序?
- vertica - 如何在sql文件中导出vertica表数据
- flutter - 如何修复 FutureBuilder 中的递归 HTTP 请求?
- sql - 选择 LIKE 数据组但将一行定义为最后一行
- javascript - Electron、React 和 Webpack,如何让 HMR 工作?