Методы создания полностраничного Flex-контейнера

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

Метод 1: использование CSS Flexbox

  1. Установите высоту элементов body и html 100 %:
    html, body {
    height: 100%;
    }
  2. Создайте элемент-контейнер и примените к нему свойства флексбокса:
    .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    }
  3. Заставьте гибкий контейнер заполнить всю страницу, установив свойство flex-grow:
    .container {
    flex-grow: 1;
    }

Метод 2: использование CSS Grid

  1. Установите высоту элементов body и html 100 %:
    html, body {
    height: 100%;
    }
  2. Создайте элемент-контейнер и примените к нему свойства сетки:
    .container {
    display: grid;
    min-height: 100vh;
    }
  3. Заставьте контейнер сетки заполнить всю страницу, установив свойство Grid-template-rows:
    .container {
    grid-template-rows: 1fr;
    }

Метод 3. Использование абсолютного позиционирования

  1. Установите высоту элементов body и html 100 %:
    html, body {
    height: 100%;
    }
  2. Создайте элемент-контейнер и примените к нему абсолютное позиционирование:
    .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }