2

Вопрос по 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.

5
  • что собственно вам не понятно? как по другому сделать высоту блока на всю страницу?
    – nueq
    Commented 4 янв. 2017 в 13:41
  • мне не понятно, почему это работает. как связана минимальная высота с высотой на всю страницу?
    – Dimon
    Commented 4 янв. 2017 в 13:45
  • высота родителя - 100% страницы. минимальная высота вашего блока - 100% родителя -> 100% страницы. Можете задать блоку высоту в 100vh, результат будет тот же) про эти единицы измерения можете поискать информацию. ее полно)
    – nueq
    Commented 4 янв. 2017 в 13:53
  • 1
    правильно, а минимальная высота вашего блока - 100% боди - что и есть 100% страницы. Просто для этих целей используйте height: 100vh)
    – nueq
    Commented 4 янв. 2017 в 13:58
  • высота боди - 100% высоты хтмл, высота хтмл - 100% высоты вьюпорта. а вьюпорт - это область просмотра, а не вся страница
    – Dimon
    Commented 4 янв. 2017 в 14:04

3 ответа 3

5

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

Потому что 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 просто будет подстраиваться под содержимое.

6
  • спасибо за ответ. не понимаю, как связана минимальная высота с высотой на всю страницу
    – Dimon
    Commented 4 янв. 2017 в 14:02
  • я знаю, что див переполняется. и что при задании overflow: hidden; это переполнение "обрезается". вопрос в том, как див по высоте оказался больше боди и хтмл
    – Dimon
    Commented 4 янв. 2017 в 14:14
  • Да потому что body и html, когда им задают 100% занимают один экран. А div занимает минимум один экран, но может и больше (как в данном случае) при min-height: 100%;. Commented 4 янв. 2017 в 14:20
  • @Dimon Вам помог ответ на вопрос? Commented 4 янв. 2017 в 14:24
  • идею с 100vh подкинули
    – Dimon
    Commented 4 янв. 2017 в 15:24
3

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

* {
  margin: 0;
  padding: 0;
}
html,
body,
.wrapper {
  height: 100%;
}
.content {
  box-sizing: border-box;
  min-height: 100%;
  padding-bottom: 90px;
}
.footer {
  height: 80px;
  margin-top: -80px;
}

И разметка:

<div class="wrapper">

    <div class="content">

        <p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p>
        <p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p>
        <p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p>
        <p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p>
        <p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p>
    </div>

    <div class="footer"></div>

</div>

При этом min-height: 100% работает ТАК:

  1. Если СОДЕРЖИМОГО МАЛО у блока content, то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта (wrapper - это 100% от высоты body, body - это 100% от высоты html, а html - это 100% от высоты viewport). При этом у блока content есть нижний paddind-буфер отрицательный, а у блока блока footer есть отрицательный margin, который позволяет в случае, когда много содержимого, "наползти" на этот padding-буфер.

  2. Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content), то высота определяется содержимым - содержимое растягивает.

Еще раз повторю, чтобы все запомнили - если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше - пожалуйста, если сможешь растянуть содержимым), если много - высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

0
div {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.