Стили футера в зависимости от высоты блока

Можно ли сделать так, чтобы если блок меньше высоты окна страницы(короткое объявление), то футер был бы прижат к нижней части окна браузера, а если блок больше и появляется скролл, то футер бы был сразу под этим блоком?

Ответ

Это просто реализовать с помощью flexbox в роли контейнера:
let cntnt = document.getElementById('content'); cntnt.addEventListener('click', function () { this.innerHTML += '

параграф

'; }); html, body { margin: 0; padding: 0; } #page { height: 100vh; display: flex; flex-direction: column; font: 16px sans-serif; color: #fff; } #page > div, #content > p { padding: 10px; text-align: center; } #page > div { flex 0 0 auto; } #content { background-color: #44a; } #footer { margin-top: auto; background-color: #4a4; }

кликайте по этому блоку
для увеличения его высоты

футер

Принцип здесь очень прост: Вертикальное направление дочерних элементов контейнера задается стилем flex-direction: column Стиль flex 0 0 auto у дочерних блоков "отключает" заполнение ими свободного пространства, и сжатие при увеличении размера "соседей" - но позволяя при этом автоматически подстраиваться под размеры содержимого. При малой высоте блока контента, футер "прилипает" к нижнему краю за счет margin-top: auto.

Что можно почитать о flexbox: Используем CSS Flexible Boxes (MDN) A Complete Guide to Flexbox (CSS-Tricks)