calc()函数无效属性值错误：如何计算Content组件高度？

1. 修正calc()语法错误 #

CSS的calc()函数要求运算符前后必须添加空格，否则浏览器会判定为无效属性值。将错误代码：

height: `calc(100vh-4rem)`

修改为：

height: `calc(100vh - 4rem)`

2. 更适配的高度计算方式（推荐） #

由于<App>根容器已设置height: 100vh，可以让Content基于父容器的高度百分比计算，避免依赖固定视口高度的潜在问题：

content: {
  border: "1px solid green",
  height: `calc(100% - 4rem)`, // 基于父容器高度计算
  overflowY: "auto"
}

3. 修正组件命名错误 #

你的Content.js和Header.js中，导出的组件函数名均错误地写为App，需改为对应组件名以避免逻辑混乱：

• Header.js修正后：

import { useStyles } from "./AppStyles";
import Typography from "@mui/material/Typography";

export default function Header() {
  const classes = useStyles();
  const { heading } = classes;

  return <Typography className={heading}>header</Typography>;
}

• Content.js修正后：

import { useStyles } from "./AppStyles";
import Typography from "@mui/material/Typography";

export default function Content() {
  const classes = useStyles();
  const { content } = classes;

  return (
    <Typography className={content}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id varius
      sem. Aliquam aliquam leo quis turpis hendrerit dapibus. Mauris ullamcorper
      luctus faucibus. In consectetur, massa at sollicitudin facilisis, velit
      ..
    </Typography>
  );
}

完整修复后的AppStyles.js #

import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh"
  },
  heading: {
    border: "1px solid blue",
    height: "4rem"
  },
  content: {
    border: "1px solid green",
    height: `calc(100% - 4rem)`,
    overflowY: "auto"
  }
}));

内容的提问来源于stack exchange，提问作者ram