Задать вопрос

Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

Нигде не могу найти ответ на этот вопрос. Прижимаю подвал таким кодом:
html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
  
.content {
  flex: 1 0 auto;
  position: relative;
}
  
.page-footer {
  flex: 0 0 auto;
}

Он, как и другие, требует установки html и body высоты в 100%. Но это убивает событие scroll. Кто знает, как можно решить проблему?
Комментаторы, вы знаете, что такое "Прижать подвал к низу страницы"? Если нет, идите гуглить. Какие fixed и sticky?
  • Вопрос задан
  • 1825 просмотров
Подписаться 8 Простой 7 комментариев
Решение пользователя Rustam Bainazarov К ответам на вопрос (4)
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
1. Все крайне элементарно и просто:
2. А вот так будет, если есть контент (та же разметка и CSS):
Update. Почему я поставил flex для тега html и почему я не использовал единицы viewport (vh/vw)? Если использовать 100vh для высоты, тогда в iOS Safari и Android Chrome (сразу после загрузки) страница по высоте будет выходить за пределы видимой области. Это происходит из-за того, что 100vh — высота окна браузера со сжатым интерфейсом, а сразу после загрузки страницы интерфейс не схлопнут. Именно поэтому flex и 100%.
Ответ написан