Как задать элементу 100 процентов высоты?

Задание 100% высоты элементу

Это частая задача в веб-разработке. Есть несколько способов, и правильный выбор зависит от контекста.

Базовые понятия

Высота 100% в CSS зависит от высоты родительского элемента. Если родитель не имеет явно установленной высоты, то 100% может не сработать как ожидается.

Способ 1: Явная высота родителя

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
}

Этот способ работает, но имеет ограничения. Нужно установить высоту для всех предков элемента.

Способ 2: Использование vh (viewport height)

Более надёжный способ — использовать единицы видимой области экрана:

.container {
  height: 100vh;
}

100vh означает 100% высоты окна браузера. На мобильных устройствах есть особенность:

.container {
  min-height: 100vh;
}

Способ 3: Использование Flexbox

Если контейнер является flex-контейнером, то 100% работает более предсказуемо:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.header {
  flex-shrink: 0;
  height: 60px;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.footer {
  flex-shrink: 0;
  height: 40px;
}

Flex-контейнер позволяет элементам занимать оставшееся пространство с помощью flex: 1.

Способ 4: Использование Grid

CSS Grid — ещё один мощный инструмент:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  margin: 0;
}

.header {
  grid-row: 1;
  height: 60px;
}

.content {
  grid-row: 2;
  overflow-y: auto;
}

.footer {
  grid-row: 3;
  height: 40px;
}

Способ 5: Использование позиционирования

Абсолютное позиционирование может решить эту задачу:

body {
  position: relative;
  height: 100vh;
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

Потенциальные проблемы

Проблема с margin и padding:

.container {
  height: 100%;
  margin: 20px;
  box-sizing: border-box;
  padding: 20px;
}

Проблема на мобильных устройствах:

.container {
  min-height: 100vh;
  min-height: 100dvh;  /* dynamic viewport height */
}

Рекомендации

• Для полноэкранного макета: используй 100vh или min-height: 100vh
• Для гибкого макета: используй Flexbox или Grid
• Для абсолютного позиционирования: используй top/bottom/left/right
• На мобильных: используй 100dvh вместо 100vh

Выбор способа зависит от структуры макета и требований проекта.