Question

我有一个React应用程序，我总是希望内容至少为高度的100％，以相应地为背景着色。我尝试使用以下顶级CSS 100％高度来实现这一点。问题是当root的内容超过100％时，当内容超出页面末尾时，滚动条不会出现。关于如何在100％高度时显示垂直滚动条的任何想法。

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html {
  height: 100%;
}

#root {
  height: 100%;
}

索引

<html>
  <body>        
    <div id="root"></div>            
  </body>
</html>

应用（内容以内容呈现）

/* eslint-disable flowtype/require-valid-file-annotation */

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import logo_long from '../../assets/images/logo_long.png';

import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from 'material-ui-icons/Menu';
import Button from 'material-ui/Button';

import Collapse from 'material-ui/transitions/Collapse';
import ExpandLess from 'material-ui-icons/ExpandLess';
import ExpandMore from 'material-ui-icons/ExpandMore';
import BusinessIcon from 'material-ui-icons/Business';
import EventIcon from 'material-ui-icons/Event';
import DashboardIcon from 'material-ui-icons/Dashboard';
import {
  Link,
  NavLink
} from 'react-router-dom';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    width: '100%',
    height: '100%',
    zIndex: 1,
    overflow: 'hidden',
  },
  appFrame: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
  },
  appBar: {
    position: 'absolute',
    marginLeft: drawerWidth,
    [theme.breakpoints.up('md')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  navIconHide: {
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  drawerHeader: theme.mixins.toolbar,
  drawerPaper: {
    width: 250,
    [theme.breakpoints.up('md')]: {
      width: drawerWidth,
      position: 'relative',
      height: '100%',
    }
  },
  nested: {
    paddingLeft: theme.spacing.unit * 4,
  },
  content: {
    backgroundColor: theme.palette.background.default,
    width: '100%',
    padding: theme.spacing.unit * 3,
    height: 'calc(100% - 56px)',
    marginTop: 56,
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100% - 64px)',
      marginTop: 64,
    },
  },
  subLink: {
    textDecoration: 'none'
  },
  text: {
    color: theme.palette.primary.A400,
    fontWeight: 'bold'
  },
  flex: {
    flex: 1,
  },

});

const CustomNavLink = (props) => (
  <NavLink  className={props.classes.subLink} to={{ pathname: props.to }}>
    <ListItem button className={props.classes.nested}>
      <ListItemText classes={props.pathname === props.to ? {text: props.classes.text} : null}
                    inset
                    primary={props.displayName} />
    </ListItem>
  </NavLink>
);

class ResponsiveDrawer extends React.Component {
  constructor() {
    super();
    this.state = {
      mobileOpen: false,
      adminOpen: true,
      jobsOpen: false,
      reportsOpen: false,
      activePath: "/admin"
    };
  }

  handleClick = state => {
    if(state === "admin") {
      this.setState({adminOpen: !this.state.adminOpen})
    } else if (state === "jobs") {
      this.setState({jobsOpen: !this.state.jobsOpen})
    } else if (state === "reports") {
      this.setState({reportsOpen: !this.state.reportsOpen})
    } else {
      console.log("unknown link group")
    }
  };

  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };

  render() {
    const { classes, theme } = this.props;
    const drawer = (
      <div>
        <div className={classes.drawerHeader}>
          {/*<img src={logo_long} style={{top:5}} />*/}
        </div>
        <Divider />
        <List className={classes.root}>
          <ListItem button onClick={() => this.handleClick("admin")}>
            <ListItemIcon>
              <BusinessIcon />
            </ListItemIcon>
            <ListItemText inset primary="Admin" />
            {this.state.adminOpen ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.adminOpen} transitionDuration="auto" unmountOnExit>
            <CustomNavLink to="/admin/users"
                           classes={classes}
                           pathname={this.props.location.pathname}
                           displayName="Users" />
            <CustomNavLink to="/admin/companies"
                           classes={classes}
                           pathname={this.props.location.pathname}
                           displayName="Companies" />
            <CustomNavLink to="/admin/products"
                           classes={classes}
                           pathname={this.props.location.pathname}
                           displayName="Products" />
          </Collapse>
          <Link className={classes.subLink} to={{ pathname: "/jobs" }}>
            <ListItem button>
              <ListItemIcon>
                <EventIcon />
              </ListItemIcon>
              <ListItemText classes={this.props.location.pathname === "/jobs" ? {text: classes.text} : null} inset primary="Jobs" />
            </ListItem>
          </Link>
          <ListItem button onClick={() => this.handleClick("reports")}>
            <ListItemIcon>
              <DashboardIcon />
            </ListItemIcon>
            <ListItemText inset primary="Reports" />
            {this.state.reportsOpen ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.reportsOpen} transitionDuration="auto" unmountOnExit>
            <CustomNavLink to="/reports"
                           classes={classes}
                           pathname={this.props.location.pathname}
                           displayName="Job Reports" />
            <CustomNavLink to="/reports/activity"
                           classes={classes}
                           pathname={this.props.location.pathname}
                           displayName="Activity Reports" />
          </Collapse>
        </List>
      </div>
    );

    return (
      <div className={classes.root}>
        <div className={classes.appFrame}>
          <AppBar className={classes.appBar}>
            <Toolbar>
              <IconButton
                color="contrast"
                aria-label="open drawer"
                onClick={this.handleDrawerToggle}
                className={classes.navIconHide}
              >
                <MenuIcon />
              </IconButton>
              <Typography type="title" color="inherit" noWrap className={classes.flex}>
                {this.props.componentTitle}
              </Typography>
              {this.props.user ?
                <Button color="contrast" onClick={this.props.handleLogout}>Logout</Button>
                :
                <Button color="contrast" onClick={this.props.handleLogin}>Login</Button>
              }

            </Toolbar>
          </AppBar>
          <Hidden mdUp>
            <Drawer
              type="temporary"
              anchor={theme.direction === 'rtl' ? 'right' : 'left'}
              open={this.state.mobileOpen}
              classes={{
                paper: classes.drawerPaper,
              }}
              onRequestClose={this.handleDrawerToggle}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            >
              {drawer}
            </Drawer>
          </Hidden>
          <Hidden mdDown implementation="css">
            <Drawer
              type="permanent"
              open
              classes={{
                paper: classes.drawerPaper,
              }}
            >
              {drawer}
            </Drawer>
          </Hidden>
          <main className={classes.content}>
            <Typography type="body1" noWrap>
            </Typography>
            {this.props.children}
          </main>
        </div>
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);

Answer 1

对于要启用滚动的组件，请使用此样式

style={{ overflowY: 'scroll', height: 'calc(100vh - 127px)' }}

此处必须指定特定的高度值。

如果为根元素或主体启用了滚动（默认设置），则在这种情况下将显示两个滚动。因此，您可能必须在此处删除滚动条。为此，您可以使用挂钩（如果有功能组件）

import { useLayoutEffect } from 'react';

const MyComponent = () =? {
  useLockBodyScroll();

  /-----rest of the code  
}

const useLockBodyScroll = () => {
  useLayoutEffect(() => {
    const originalOverflowStyle = window.getComputedStyle(document.body).overflow;
    document.body.style.overflow = 'hidden';

    // This will set back the root/body overflow to Scroll when the component is unmounted
    return () => document.body.style.overflow = originalOverflowStyle;
  }, []);
}

useLayoutEffect（）是反应类似于Hooks API的useState（）

Answer 2

您为根元素设置import datetime from datetime import date Start_Date = date(2010, 01, 01) market = 1 Query_PNL = """SELECT rptday,extract(year from rptday),extract(month from rptday),a.botid,closetoclosepnl, case when closetoclosepnl > 0 then 1 when closetoclosepnl < 0 then 0 END AS PNL_score FROM RESEARCH.ADMIN.BOTSDAILYPNL a --order by botid desc, rptday asc; right join (SELECT marketid,botid,modelid FROM RESEARCH.ADMIN.BOTS where modelid = 2018 and botname like '%BackTesting')b on a.MARKETID = b.marketid and a.BOTID = b.botid where a.rptday >='2010-01-01' and a.rptday <='2010-01-31' and a.MARKETID = %s and PNL_score is not null order by rptday asc""" %(market) print Query_PNL会导致该行为。添加

overflow: hidden;

在React应用程序中，当高度设置为100％时，不显示垂直滚动

2 个答案: