Как динамически использовать полную высоту экрана для содержимого Material-UI SPA?

Question

Я ищу лучший способ установить макет страницы для SPA, который состоит из статического заголовка (AppBar) сверху и динамического содержимого страницы под заголовком. Содержание страницы ScreenSizePage иногда (но не всегда) должно иметь высоту, которая точно соответствует оставшейся высоте экрана. Другими словами: как лучше всего сделать так, чтобы высота div в ScreenSizePage точно соответствовала оставшейся высоте экрана в приложении Material-UI?

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

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

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

Answer 1

Вы можете использовать CSS flexbox или функцию «calc» для достижения этой цели. «flex-grow» сделает содержимое подходящим для оставшегося пространства. Codesandbox ниже. Я прокомментировал часть с "calc"

https://codesandbox.io/s/material-demo-brz62