Как растянуть элемент на всю высоту CSS

Чтобы растянуть элемент на всю высоту, необходимо задать свойства height: 100%; и margin: 0; для html и body (родительских элементов). Затем для целевого элемента необходимо установить height: 100%; (100% от родительского элемента). Вот пример кода:

html, body {
  height: 100%;
  margin: 0;
}

.target-element {
  height: 100%;
}

Обратите внимание, что этот метод работает только в том случае, если все родительские элементы тоже имеют высоту 100%. Если родительский элемент не имеет фиксированной высоты, то данный метод не сработает. В таком случае можно попробовать использовать свойство position: absolute;:

html, body {
  height: 100%;
  margin: 0;
}

.parent-element {
  position: relative;
}

.target-element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Здесь мы устанавливаем родительскому элементу position: relative;, чтобы именно он являлся контекстом позиционирования для дочернего элемента. Затем для целевого элемента мы задаем position: absolute; и устанавливаем значения top: 0;, bottom: 0;, left: 0; и right: 0;, чтобы элемент занял всю доступную высоту.