Как сделать sticky footer без layout-багов?

Часто делают так:
footer {
position: fixed;
bottom: 0;
}

Но fixed-footer перекрывает контент и ломает mobile layout.

Есть нативный flex-способ без JS и вычислений высоты.
body {
display: flex;
flex-direction: column;
}

Теперь body становится вертикальным flex-контейнером.

Остаётся отодвинуть footer вниз.
footer {
margin-top: auto;
}

auto забирает всё свободное пространство сверху и footer автоматически прижимается к низу страницы.
body {
min-height: 100dvh;
}

Так layout занимает минимум всю высоту viewport даже при маленьком количестве контента.

Code Ready | #совет