Как растянуть блок на всю высоту страницы?

427

07 января 2017, 12:47

Вопрос по CSS. Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div, в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.

Нашел вот такое решение: задать всем блокам-родителям height: 100%;, а блоку-контейнеру задать min-height: 100%;. Вот пример:

html, body { 
  height: 100%; 
} 
 
div { 
  min-height: 100%; 
  background-color: red; 
  border: 2px solid black; 
}

<div> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
</div>

Не понимаю, почему это работает. Похоже на "шаманство". min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div. Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html.

Answer 1

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

html, body { 
  height: 100%; 
  overflow: hidden; 
} 
 
div { 
  min-height: 100%; 
  background-color: red; 
  border: 2px solid black; 
}

<div> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
  <p>text text text text</p> 
</div>

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh;, где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.