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

Leave a Comment / Разное / By /

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

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

  • html
  • css
  • css3
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

Работу 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>
    <div>
        <p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p>
        <p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p>
        <p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p>
        <p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p>
        <p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p>
    </div>
    <div></div>
</div>

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

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

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

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

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — Растянуть div на всю высоту родительского div

Здравствуйте. Есть три блока Div. Один родительский, второй внутри слева (для меню), второй внутри справа (для текста). Как можно растянуть правый внутренний блок (можно с левым) на всю высоту родительского блока. Сам родительский блок с фиксированной высотой не менее 1100px

Вот код:

<div>
<div></div>
<div></div>
</div>

Вот что прописано в css:

    #wrapctr {
          width:80%;
          min-width: 700px;
          max-width: 1200px;
          background:#FFF;
          margin:0 auto;
          min-height:1100px;
          z-index:2;        
        }
    #leftmenu { 
      background: #FFF;
      float: left;
      width: 250px;
      list-style: none;
     }
.rightcontent {
      background: #FFF; 
      margin-left: 255px; 
     }

UPD: На одной странице выдаются фотографии 12 штук по три в ряд, и страница имеет такой вид

<div>
<div></div>
<div>
//общий див
<div>
// на каждую картинку
<div><img src=". ./img/1625.jpg"></div>
</div>
</div>
</div>

И если на странице фотографий ровно 12, а не меньше, это полотно идет ниже правого дива

  • css
  • html
3 

html,
body {
  padding: 0px;
  margin: 0px;
}

#wrapctr {
  width: 80%;
  min-width: 700px;
  max-width: 1200px;
  background: #FFF;
  margin: 0 auto;
  min-height: 1100px;
  position: relative;
  z-index: 2;
}

#leftmenu {
  background: #f00;
  width: 250px;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  list-style: none;
}

.rightcontent {
  background: #000;
  position: absolute;
  height: 100%;
  left: 255px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}
<div>
  <div></div>
  <div></div>
</div>
3 

html,
body {
  padding: 0px;
  margin: 0px;
}

#wrapctr {
  width: 80%;
  min-width: 700px;
  max-width: 1200px;
  background: #FFF;
  margin: 0 auto;
  min-height: 1100px;
  height: 0px; /* просто чтобы был */
}

#leftmenu {
  background: #f00;
  width: 250px;
  height: 100%;
  float: left;
}

.
  rightcontent {
  background: #000;
  height: 100%;
}
<div>
  <div></div>
  <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — Для расширения div на всю высоту

спросил

Изменено 7 месяцев назад

Просмотрено 316 тысяч раз

Есть ли метод, который я могу использовать для расширения div до полной высоты? У меня тоже есть липкий нижний колонтитул.

Вот веб-страница: Веб-сайт удален . Средний бит, о котором я говорю, — это белый div, midcontent, который имеет значения CSS:

 .midcontent{
     ширина:85%;
     поле:0 авто;
     отступ: 10 пикселей 20 пикселей;
     заполнение сверху: 0;
     цвет фона:#FFF;
     переполнение: скрыто;
     минимальная высота: 100%;
     максимальная ширина: 968 пикселей;
     высота:100%;
}

Так что да, очевидно height:100% не сработало. Кроме того, ВСЕ родительские контейнеры имеют заданную высоту.

Вот общая структура

 <тело>
    <дел>
        <дел>
            <дел>
                <дел>
<дел>
<дел> <дел>