Как прижать подвал к низу страницы и при этом оставить событие 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?
  • Вопрос задан
  • 534 просмотра
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
1. Все крайне элементарно и просто:
2. А вот так будет, если есть контент (та же разметка и CSS):
Update. Почему я поставил flex для тега html и почему я не использовал единицы viewport (vh/vw)? Если использовать 100vh для высоты, тогда в iOS Safari и Android Chrome (сразу после загрузки) страница по высоте будет выходить за пределы видимой области. Это происходит из-за того, что 100vh — высота окна браузера со сжатым интерфейсом, а сразу после загрузки страницы интерфейс не схлопнут. Именно поэтому flex и 100%.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@ortsuev33
Min-height:100%;
Ответ написан
mbeloshitsky
@mbeloshitsky
Вебдев, систем оперейшонс, ж.д. автоматика
Вот так, наример https://jsfiddle.net/mbeloshitsky/npq01mLr/1/

Правда `position: sticky` в IE11 не работает.

Можно и флексом сверстать, перенесите только ваш скролл в какой-нибудь контейнер и работайте с ним уже привязавшись к контейнеру.
Ответ написан
@tyzberd
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы