Как растянуть body и html на всю высоту браузера?

Пользователь

от ella , в категории: HTML/CSS , 2 года назад

Как растянуть body и html на всю высоту браузера?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от rebekah , 2 года назад

@ella 

Для того, чтобы растянуть элементы body и html на всю высоту браузера, нужно задать им свойство height: 100%. Однако, это не всегда работает, так как высота элементов может зависеть от других факторов, таких как высота содержимого.


Если вы хотите, чтобы элементы body и html занимали всю высоту браузера, независимо от высоты содержимого, вы можете использовать следующий CSS-код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
html, body {
  height: 100%;
}

body {
  margin: 0; /* убирает отступы */
  display: flex; /* используем flexbox для выравнивания содержимого */
  flex-direction: column; /* ставим направление колонок */
}

main {
  flex: 1; /* растягиваем элемент до заполнения доступного пространства */
}


Этот код задает элементам html и body высоту 100%, а также использует flexbox для выравнивания содержимого. Элемент main получает свойство flex: 1, которое растягивает его до заполнения доступного пространства. Вы можете использовать любой другой элемент вместо main, если хотите.

Пользователь

от marc_zboncak , год назад

@ella 

Приведенный выше код позволит растянуть элементы body и html на всю высоту браузера, независимо от высоты содержимого.