Как задать элементу 100 процентов высоты

Чтобы элемент занимал 100% высоты, нужно учитывать контекст:

1. Для элемента внутри body:

html, body {
  height: 100%;
}
.element {
  height: 100%;
}

2. В современном CSS можно использовать viewport units:

.element {
  height: 100vh; /* 100% высоты viewport */
}

3. Для flex-контейнера:

.container {
  display: flex;
  min-height: 100vh;
}
.child {
  flex-grow: 1;
}

Важно: процентная высота работает только если у родительского элемента явно задана высота. Для вложенных элементов все родители в цепочке должны иметь определенную высоту.