reactjs - 如何让我的布局适应 Material-UI 工具栏的高度？

Question

我目前正在构建布局组件(导航栏、页脚和内容)，它看起来像这样:

// containers/Layout/index.jsx
export default function Layout({ children }) {
  const classes = useStyles();

  return (
    <>
      <Navbar />
      <main className={classes.root}>{children}</main>
      <Footer />
    </>
  );
}

这些是样式:

// containers/Layout/styles.js
export default makeStyles((theme) => ({
  root: {
    minHeight: `calc(100vh - 64px - ${theme.mixins.toolbar.minHeight}px)`,
  },
}));

现在我遇到了一个问题，Material-UI Toolbar 是有响应的。我的页脚是 64px 高，但我的应用栏当然是动态的。

// component/Appbar/index.jsx
export default function Navbar() {
  return (
    <AppBar position="static">
      <Toolbar />
    </AppBar>
  );
}

作为引用，mixin 看起来像这样:

我正在尝试获取 AppBar 的当前高度，以便让我的 calc 函数响应。我试过使用 mixin，但它只返回正常的最小高度。另一种选择是使用媒体查询，但我宁愿不使用，因为媒体查询已经存在于工具栏 mixin 上。

如何让这个最小高度适应屏幕尺寸？我的目标是始终用底部的页脚填充 100% 的屏幕，并用内容填充剩余空间。

Answer 1

可以看到toolbar的默认mixin here :

toolbar: {
  minHeight: 56,
  [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
    minHeight: 48,
  },
  [breakpoints.up('sm')]: {
    minHeight: 64,
},

它将 minHeight 设置为不同屏幕尺寸/方向的不同值。同样，在标题下方的主要内容中，您应该将 height 设置为如下所示:

content: {
  height: `calc(100vh - 56px)`,
  [`${theme.breakpoints.up("xs")} and (orientation: landscape)`]: {
    height: `calc(100vh - 48px)`
  },
  [theme.breakpoints.up("sm")]: {
    height: `calc(100vh - 64px)`
  }
}

现场演示