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

Question

[Muvka]

Нигде не могу найти ответ на этот вопрос. Прижимаю подвал таким кодом:

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?

Comments

[shmatuan]

Какой скролл, если высота страницы 100% ?
position: fixed на футер для этого есть

Нужен код в примитивных формах и описание/картинка как это вообще должно быть

[Muvka]

Мне не нужно, чтобы подвал всегда виден был. Нужно, чтобы на страницах с малым количеством контента, он не отлипал от низа страницы.

[Rustam Bainazarov]

Muvka, а сколлинг при чём?

[Muvka]

При том, что событие scroll не срабатывает в данном случае.

[Rustam Bainazarov]

Muvka, скинул вам пример, все там работает.

[shmatuan]

Комментаторы, вы знаете, что такое "Прижать подвал к низу страницы"? Если нет, идите гуглить. Какие fixed и sticky?

лучше бы вставил фразу "Нужно, чтобы на страницах с малым количеством контента, он не отлипал от низа страницы.", вместо наезда из-за неуменя составить нормальное ТЗ

p.s. Ну я погуглил, нашёл сразу ответ -_-
Что мешало погуглить самому, перед тем как спрашивать?

[Сергей delphinpro]

shmatuan,

лучше бы вставил фразу "Нужно, чтобы на страницах с малым количеством контента, он не отлипал от низа страницы.", вместо наезда из-за неуменя составить нормальное ТЗ

"Прижать подвал к низу страницы" - это нормальная формулировка. Встречается в ТЗ всё время именно в таком виде (10 лет работаю). Что-то другое может подумать только совсем ничего не знающий новичок в верстке.

Answer 1

[Rustam Bainazarov]

1. Все крайне элементарно и просто:
2. А вот так будет, если есть контент (та же разметка и CSS):
Update. Почему я поставил flex для тега html и почему я не использовал единицы viewport (vh/vw)? Если использовать 100vh для высоты, тогда в iOS Safari и Android Chrome (сразу после загрузки) страница по высоте будет выходить за пределы видимой области. Это происходит из-за того, что 100vh — высота окна браузера со сжатым интерфейсом, а сразу после загрузки страницы интерфейс не схлопнут. Именно поэтому flex и 100%.

Comments

[Muvka]

Вроде похоже. Спасибо.

[Сергей delphinpro]

Зачем все эти извраты на html и body?
Не проще просто написать min-height:100vh для .container?

[Rustam Bainazarov]

Сергей delphinpro, тогда на iOS при загрузке страница будет выходить за пределы видимой области, т. к. на iOS 100 vh — высота окна со сжатым интерфейсом. А при загрузке страницы интерфейс не схлопнут.

[Сергей delphinpro]

SmthTo, а, ясно. на андроидах такая же лажа бывает. Но я обычно подвал прижимаю в медиазапросах, под дестопы. в мобилах контента меньше одного экрана все равно не бывает. В подавляющем большинстве сайтов.

[Rustam Bainazarov]

Сергей delphinpro, да, к сожалению, в Android Chrome такая же песня, что, конечно, неприятно, но понятно: если при сжатии интерфейса будет меняться и значение vh, то это будет постоянный repaint с учётом частого процесса сжатия-разжатия :))

Answer 2

[tyzberd]

https://codepen.io/tyzberd/pen/aPJxEW?editors=1100 все норм с скролом

Comments

[Muvka]

И где в вашем примере подписка на событие 'scroll'?

[tyzberd]

а для чего подписка на событие 'scroll'? не понял.
просто добавить контента и будет скролл

Answer 3

[ortsuev33]

Min-height:100%;

Comments

[Muvka]

Тогда подвал не прижимается к низу страницы.

Answer 4

[Михаил Белошицкий]

Вот так, наример https://jsfiddle.net/mbeloshitsky/npq01mLr/1/

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

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