Reactjs 如何动态使用材质UI SPA内容的全屏高度？

我正在寻找为SPA设置页面布局的最佳方法，SPA由顶部的静态标题（

AppBar

）和标题下方的动态页面内容组成。 页面内容

ScreenSizePage

有时（但并非总是）的高度应与屏幕的剩余高度完全匹配。 换句话说：在材质UI应用程序中，只有使

ScreenSizePage

中的

div

的高度与剩余屏幕高度完全匹配的最佳方法是什么

index.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'),
);

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>
    );
}

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>
    );
}

import React from 'react';

export default function HomePage() {
    return (
        <div>This page can have any height</div>
    );
}

import React from 'react';

export default function ScreenSizePage() {
    return (
        <div>This page should use the remaining page height</div>
    );
}

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/CssBaseline”导入CssBaseline；
从'@material ui/styles'导入{ThemeProvider}；
从“react router dom”导入{BrowserRouter}；
从“./App”导入应用程序；
从“/theme”导入主题；
ReactDOM.render(
,
document.querySelector（“#root”），
);

App.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'),
);

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>
    );
}

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>
    );
}

import React from 'react';

export default function HomePage() {
    return (
        <div>This page can have any height</div>
    );
}

import React from 'react';

export default function ScreenSizePage() {
    return (
        <div>This page should use the remaining page height</div>
    );
}

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“/AppBar”导入AppBar；
从“./pages/HomePage”导入主页；
从“./pages/ScreenSizePage”导入{ScreenSizePage}；
导出默认函数App（）{
返回(
);
}

AppBar.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'),
);

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>
    );
}

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>
    );
}

import React from 'react';

export default function HomePage() {
    return (
        <div>This page can have any height</div>
    );
}

import React from 'react';

export default function ScreenSizePage() {
    return (
        <div>This page should use the remaining page height</div>
    );
}

从“React”导入React；
从'@material ui/core/styles'导入{createStyles，makeStyles，Theme}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles（（主题：主题）=>createStyles({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
}));
导出默认函数DenseAppBar（）{
const classes=useStyles（）；
返回(
{/* ... */}
家
);
}

主页。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'),
);

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>
    );
}

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>
    );
}

import React from 'react';

export default function HomePage() {
    return (
        <div>This page can have any height</div>
    );
}

import React from 'react';

export default function ScreenSizePage() {
    return (
        <div>This page should use the remaining page height</div>
    );
}

从“React”导入React；
导出默认函数主页（）{
返回(
这一页可以有任何高度
);
}

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'),
);

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>
    );
}

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>
    );
}

import React from 'react';

export default function HomePage() {
    return (
        <div>This page can have any height</div>
    );
}

import React from 'react';

export default function ScreenSizePage() {
    return (
        <div>This page should use the remaining page height</div>
    );
}

从“React”导入React；
导出默认函数ScreenSizePage（）{
返回(
此页面应使用剩余页面高度
);
}

您可以使用CSS flexbox或“calc”功能来实现这一点。“flex grow”将使内容适合剩余空间。下面是代码沙盒。我已经用“calc”注释掉了该部分

---

感谢您的出色反馈。我还在想，你怎么能动态地让一些页面有固定的高度，而另一些页面没有？