Блог

В настоящее время я создаю компонент макета (панель навигации, нижний колонтитул и содержимое), он выглядит так:

 // 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)`,
  },
}));
 

Теперь я столкнулся с проблемой, материал-пользовательский Toolbar интерфейс реагирует. Мой нижний колонтитул 64px высок, но моя панель приложений, конечно, динамична.

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

Для справки, вот как выглядит миксин:

Я пытаюсь получить текущую высоту AppBar , чтобы я мог сделать свою calc функцию отзывчивой. Я пробовал использовать миксин, но он возвращает только нормальную минимальную высоту. Другой вариант-использовать медиа-запрос, но я бы предпочел этого не делать, так как медиа-запрос уже присутствует на микшине панели инструментов.

Как бы я получил эту минимальную высоту, чтобы правильно адаптироваться к размеру экрана? Моя цель-всегда заполнять 100% экрана нижним колонтитулом внизу, содержимым, заполняющим оставшееся пространство.

Вы можете увидеть микшины панели инструментов по умолчанию здесь:

 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)`
  }
}
 

Живая демонстрация