Реализация футера, выскальзывающего из под блока с основным контентом, на сайте - очень неплохая и, действительно, интересная идея.

Итак, приступим.

Основные моменты, необходимые для реализации задачи:

1. Минимальная высота основного контента должна составлять 100vh. Сейчас это привычный трюк, испольуезмый практически для всех сайтов.
2. Фон основного контента должен быть непрозрачным, чтобы скрыть находящийся под ним футер.
3. Как сказано в предыдущем пункте, футер находится за блоком с основным контентом, для эффективной реализации задачи понадобятся еще такие CSS-свойства, как posiiton: relative и z-index.
4. Для того, чтобы футер находился в нижней части области видимости экрана пригодится position: sticky

Упрощенно структура HTML-документа выглядит следующим образом:

А вот и магия CSS:

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
main {
  /* контент должен занимать всю область видимости */
  min-height: 100vh;
  /* фон контента должен быть непрозрачным */
  background: white;
  /* контент должен находится перед футером */
  position: relative;
  z-index: 1;
  font: 16px/1.4 system-ui, sans-serif;
  padding: 2rem;
}
footer {
  /* прибиваем футер к низу области видимости */
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #252a47;
  display: grid;
  place-items: center;
  padding: 50px;
}

А вот и рабочий пример на codepen:

Спасибо за внимание.

По материалам статьи Chris Coyier “The Slideout Footer”.