Как прижать подвал к низу страницы и при этом оставить событие 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?
  • Вопрос задан
  • 503 просмотра
Решения вопроса 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
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.