Элемент Flexbox не заполняет оставшееся пространство в контейнере страницы 100vh

На чтение 3 мин Опубликовано 01.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Анализ Кода
Решение
Заключение

Вопрос или проблема

У меня есть макет с контейнером страницы flexbox на 100vh, который оборачивает верхнее меню и контейнер. Я пытаюсь сделать так, чтобы элемент контейнера заполнял оставшееся вертикальное пространство под меню, но не знаю, как это сделать.

https://codesandbox.io/p/sandbox/n2nr3l

HTML

<body>
  <div class="page">
    <div class="menu">меню</div>
    <div class="container">
      <div class="sidebar"></div>
      <div class="main"></div>
    </div>
  </div>
</body>

CSS

.page {
  display: flexbox;
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
  /* нужно сделать так, чтобы контейнер использовал оставшуюся высоту .page */
  flex-grow: 1;
}

html,
body {
  padding: 0;
  margin: 0;
}

Это 2 вертикально расположенные строки в контейнере flexbox: меню и контейнер, который должен расширяться до нижней части страницы.

Ответ или решение

Вопрос, с которым вы столкнулись, касается заполнения оставшегося пространства в flexbox-контейнере, размещенном в элементе, высота которого установлена в 100vh. Давайте подробно рассмотрим вашу HTML и CSS структуру и выявим возможные решения для вашей проблемы.

Проблема

У вас есть два элемента: menu и container. Вы хотите, чтобы элемент container заполнял оставшееся пространство под меню внутри родительского контейнера page, который имеет высоту 100% от высоты окна браузера. Но при этом элемент container не заполняет оставшееся вертикальное пространство, вероятно, из-за неверных настроек в CSS.

Анализ Кода

Ваш HTML код выглядит следующим образом:

<body>
  <div class="page">
    <div class="menu">menu</div>
    <div class="container">
      <div class="sidebar"></div>
      <div class="main"></div>
    </div>
  </div>
</body>

А CSS:

.page {
  display: flexbox; /* здесь должна быть flex, а не flexbox */
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
  flex-grow: 1; /* это свойство должно работать как задумано */
}

html,
body {
  padding: 0;
  margin: 0;
}

Решение

Исправление flexbox:
Ваша первоначальная настройка display: flexbox; является неправильно написанной. Вам нужно заменить это на display: flex;. Таким образом, родительский элемент использует flexbox-структуру.
Отсутствие flex-grow на элементе menu:
Чтобы container занимал доступное пространство, нужно убедиться, что menu не занимает его. Вы можете добавить flex-shrink: 0; на menu, чтобы предотвратить его уменьшение.
Дополнительные улучшения:
Чтобы убедиться в работоспособности дизайна, можно дать container фиксированную высоту. Однако это не рекомендуется, если ваш menu может динамически меняться по высоте. Вместо этого лучше оставить гибкий подход.

Ваш исправленный CSS код будет выглядеть так:

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  flex-shrink: 0; /* Обработка уменьшения высоты */
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
  flex-grow: 1; /* Это дает контейнеру возможность занимать оставшееся пространство */
}

html,
body {
  padding: 0;
  margin: 0;
}

Заключение

Теперь, после всех исправлений, элемент container должен заполнять оставшееся пространство под элементом menu. Не забывайте проверять, что изменения в коде отображаются в реальном времени, чтобы удостовериться в правильной работе вашего макета.

Использование flexbox для создания адаптивных и отзывчивых макетов остается одним из самых эффективных способов, обеспечивающих нужную гибкость и масштабируемость вашего интерфейса.