在 React 和 material-ui 中制作 popper 或 div 高度“100%”答案

【问题标题】：Making popper or div height '100%' in React and material-ui在 React 和 material-ui 中制作 popper 或 div 高度“100%”
【发布时间】：2021-03-03 14:49:35
【问题描述】：

我有这样的 jsx。

  <Popper id={id} open={open} anchorEl={anchorEl} style={{opacity:'0.5',width:'100%',size:'100%'}}>
  <div style={{backgroundColor: 'red'}}>The content of the Popper.</div>
  </Popper>
  <button aria-describedby={id} type="button" onClick={handleClick}>
    Toggle Popper
  </button>

这样，Popper 变为宽度 100% 但不是高度 100%

我搜索了一下，发现我需要将 html 和 body 设为 100%

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

但是我使用 Material-UI 和 Reactjs

所以，我不确定我应该把这段代码放在哪里。

这些是我的代码

我的jsx

 return (
    <div style={{backgroundColor:"#212325"}}>
      <Header
        brand="my brand"
        rightLinks={<HeaderLinks />}
        fixed
        color="transparent"
        changeColorOnScroll={{
          height: 50,
          color: "white"
        }}
        {...rest}
      />
     
      <Container maxWidth="md">
          <Grid container style={{paddingTop:"100px"}}>

      
            <Box mt={2} mb={2}>
              <ParamBoard></ParamBoard>
              </Box>
          </Grid>

          <Popper id={id} open={open} anchorEl={anchorEl} style={{opacity:'0.5',width:'100%',size:'900px'}}>
      <div style={{backgroundColor: 'red'}}>The content of the Popper.</div>
      </Popper>
      <button aria-describedby={id} type="button" onClick={handleClick}>
        Toggle Popper
      </button>

          <Grid item xs={12} sm={12} md={12} lg={12} >
              <ListMix></ListMix>
          </Grid>
      </Container>
      <Footer />
    
    </div>
  );

我的style

import { container } from "assets/jss/material-kit-react.js";

const componentsStyle = {
  root:{
    flexGrow: 0,

  },
  container,
  brand: {
    color: "#FFFFFF",
    textAlign: "left"
  },
  title: {
    fontSize: "4.2rem",
    fontWeight: "600",
    display: "inline-block",
    position: "relative"
  },
  subtitle: {
    fontSize: "1.313rem",
    maxWidth: "500px",
    margin: "10px 0 0"
  },
  main: {
    background: "#FFFFFF",
    position: "relative",
    zIndex: "3"
  },
  mainRaised: {
    margin: "-60px 30px 0px",
    borderRadius: "6px",
    boxShadow:
      "0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
  },
  link: {
    textDecoration: "none"
  },
  textCenter: {
    textAlign: "center"
  },
  myRadioLabel:{
    fontSize: "1.0rem"
  },

};

export default componentsStyle;

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我想也许你需要给你的根组件一个 100% aswel 的高度，所以在你 .jsx 文件中的行：

 <div style={{backgroundColor:"#212325"}}>

需要...

 <div style={{backgroundColor:"#212325", height: '100%'}}>

【讨论】：