Как задать дочернему блоку высоту 100%?

Question

Есть родительский блок .wrapper, у которого задана минимальная высота 100%.

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
}

.inner {
  min-height: 100%;
}

<div class="wrapper">
  <div class="inner">Контент</div>
</div>

Как сделать для блока .inner также минимальную высоту 100%?

Answer 1

Надо понимать что такое 100% и от чего вы их берете... 100% от необъявленой велечины = необъявленная величина. Это так не работает. Как вориант решения, можно написать так.

body {
    min-height: 100%;
}

.wrapper {
    height: 100vh;
    padding: 10px;
    background-color: #f00;
}

.inner {
    height: 100%;
    background-color: pink;
}

<div class="wrapper">
    <div class="inner">Контент</div>
</div>

Answer 2

Блочные элементы (к которым по умолчанию относятся <div>, <body>, <html> и др.) имеют свойство растягиваться по ширине на 100%, а по высоте подстраиваться под содержимое.

Пройдём в вашем коде от самого вложенного элемента к корневому, т.е. снизу вверх:

html {
  /* 
    А этому блоку совсем ничего не задано, т.е. 
    цепочка наследования размеров обрывается
  = подстраиваем высоту под контент
  = всего одна строчка текста 
  */
}

body {
  /* 
    В этом блоке только блок .wrapper
  + высота указана, но 100% от чего? 
  = подстраиваем высоту под размер блока .wrapper
  */
  height: 100%;
}

.wrapper {
  /* 
    В этом блоке только блок .inner
  + не указана высота 
  = подстраиваем высоту под размер блока .inner
  */
  min-height: 100%;
}

.inner {
  /* 
    В этом блоке всего одна строчка текста 
  + не указана высота 
  = подстраиваем высоту под размер текста 
  */
  min-height: 100%;
}

<div class="wrapper">
  <div class="inner">Контент</div>
</div>

Если бы была указана высота для <html> в 100%, то она соответствовала бы видимой части документа (читай, высоте окна), которая имеет вполне себе фиксированные размеры.

Также следует учитывать, что min- и max- - это, так скажем, "ограничители" и нежелательно заменять ими явное указание размеров (независимо от того, относительные они или абсолютные).

Итак, только тег <html> со значением 100% хоть что-то знает об истинном размере, отталкиваясь от высоты окна.

Теперь снова пройдёмся по иерархии и на каждом элементе зададим себе вопрос: "100% от чего? От какого значения?"

html {
  height: 100%; /* 100% от высоты окна */
  box-shadow: inset 0 0 10px #f00;
}

body {
  height: 100%; /* 100% от высоты html */
  box-shadow: inset 0 0 10px #fa0;
}

.wrapper {
  min-height: 100%;
  height: 100%; /* 100% от высоты body */
  box-shadow: inset 0 0 10px #090;
}

.inner {
  min-height: 100%; /* 100% от высоты .wrapper */
  box-shadow: inset 0 0 10px #00f;
}

<div class="wrapper">
  <div class="inner">Контент</div>
</div>

БЛОГ НА HUSL

Как задать дочернему блоку высоту 100%?

Ответы (2 шт):