Question

我正在尝试构建一个在NavBar下方具有NavBar组件和Paper组件的应用程序，该组件中具有网格。

结构：

导航栏
纸

那应该覆盖整个屏幕。在该Paper组件中，我有一个网格，其中有两个项目，左侧部分不能滚动，并且不能覆盖其余的视图高度，右侧应该也可以覆盖整个高度，但是如果需要它可以自行滚动，而不是可以滚动整个页面。

我的主要组件：

Secretary

https://pastebin.com/M1ruEUhe

NavBar组件：

    import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

import NavBar from "./components/NavBar/NavBar";

const styles = {
root: {
    display: "flex",
    flexDirection: "column",
    height: "100vh",
    backgroundColor: "grey",
    flex: 1
},
content: {
    backgroundColor: "green",
    height: "100%"
},
scrollable: {
    height: "100%",
    overflow: "scroll"
}
};

const Test = ({ classes }) => {
return (
    <div className={classes.root}>
    <NavBar />

    <Paper className={classes.content}>
        <Grid container>
        <Grid item xs={8}>
            <p>Ola tudo bem</p>
        </Grid>
        <Grid item xs={4} className={classes.scrollable}>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
            blandit suscipit est at dapibus. Sed arcu diam, tincidunt ac
            fringilla non, sollicitudin eu turpis. Proin mattis cursus leo,
            nec placerat sapien malesuada lobortis. Sed convallis elit id
            imperdiet cursus. Suspendisse potenti. Donec et convallis lacus.
            Ut ac iaculis ex. Integer eu auctor mi. Phasellus vestibulum
            pulvinar quam ipsum at ante. Nam nunc justo, semper in libero et,
            pulvinar quam ipsum at ante. Nam nunc justo, semper in libero et,
            pulvinar quam ipsum at ante. Nam nunc justo, semper in libero et,
            congue maximus justo. Nunc cursus ligula vitae porta vulputate.
            Class aptent taciti sociosqu ad litora torquent per conubia Class
            aptent taciti sociosqu ad litora torquent per conubia Class aptent
            taciti sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos
            himenaeos. Morbi accumsan sed risus eu condimentum. Phasellus
            egestas tellus non ligula tempus, quis dictum urna fringilla.
            Proin ultrices finibus aliquam. Aenean lacus ex, interdum sed nisl
            sed, rutrum interdum enim. Nulla facilisi. Proin quam sem,
            fermentum in tortor et, interdum tempus facilisi. Proin quam sem,
            fermentum in tortor et, interdum tempus facilisi. Proin quam sem,
            fermentum in tortor et, interdum tempus facilisi. Proin quam sem,
            fermentum in tortor et, interdum tempus congue maximus justo. Nunc
            cursus ligula vitae porta vulputate. Class aptent taciti sociosqu
            ad litora torquent per conubia nostra, per inceptos himenaeos.
            Morbi accumsan sed risus eu condimentum. Phasellus egestas tellus
            non ligula tempus, quis dictum urna fringilla. Proin ultrices
            finibus aliquam. Aenean lacus ex, interdum sed nisl sed, rutrum
            interdum enim. Nulla facilisi. Proin quam sem, fermentum in tortor
            et, interdum tempus ligula. Quisque tellus turpis, vehicula vitae
            tempor id, eleifend vel risus. Nam ullamcorper porta eros, ac
            eleifend elit sollicitudin non. Proin non diam in tellus sodales
            venenatis. Etiam ac erat id magna aliquam interdum. Sed nunc
            tortor, consequat ut dignissim sit amet, sollicitudin in dui.
            Praesent fringilla eget turpis sit amet fermentum. Morbi auctor
            lacinia leo. In hac habitasse platea dictumst. Integer nulla quam,
            accumsan eget nibh vitae, dignissim dictum velit. Sed id lorem
            nulla. Donec a pulvinar purus, ac finibus orci. Phasellus molestie
            faucibus neque, quis rhoncus nibh euismod vitae. Nunc vel
            fermentum ex. Vivamus laoreet porttitor lobortis. Integer nisi
            diam, fermentum sed lacus in, sagittis scelerisque diam.
            </p>
        </Grid>
        </Grid>
    </Paper>
    </div>
);
};

export default withStyles(styles)(Test);

https://pastebin.com/dUiLuvyG

我希望成为： https://prnt.sc/khra8g

https://prnt.sc/khriaw绿色和黄色框应位于屏幕底部，而不滚动页面。

具有导航栏和灰色区域的完整高度的应用程序，用于放置内容，但是即使只有div，其导航栏也不会输入到高度中。

全高div材质UI反应

0 个答案: