на всю длину

Ответ от Антон Вавилкин[активный]
Чтобы блок занимал всю высоту страницы, первым делом сбросьте стандартные отступы у html и body через margin: 0 и padding: 0. Затем задайте им height: 100%, иначе дочерние элементы не смогут корректно тянуться на всю длину. Самый надёжный современный способ - использовать единицу vh. Для нужного блока задайте min-height: 100vh - это означает 100 процентов от высоты окна просмотра, и блок гарантированно растянется от верхнего до нижнего края экрана, даже если содержимого внутри мало. Если блок должен тянуться за содержимым, когда оно превышает экран, примените flexbox. Оберните страницу в контейнер с display: flex, flex-direction: column и min-height: 100vh, а самому блоку задайте flex: 1. Тогда он займёт всё свободное пространство и будет удлиняться по мере роста контента. Не забудьте про box-sizing: border-box у блока, чтобы внутренние padding и border не добавлялись к высоте и не вызывали лишнюю прокрутку.