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

Question

Muvka @Muvka

CSS

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

Вопрос задан более трёх лет назад
1698 просмотров

7 комментариев

Подписаться 8 Простой 7 комментариев

shmatuan @shmatuan

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

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

Написано более трёх лет назад
Muvka @Muvka Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Muvka @Muvka Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
shmatuan @shmatuan

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

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

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

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

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

Написано более трёх лет назад

Решения вопроса 2

5 комментариев

Muvka @Muvka Автор вопроса

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад

2 комментария

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- час назад
- 31 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 65 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 23 апр.
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 23 апр.
- 86 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 23 апр.
- 87 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 714 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 23 апр.
- 2321 просмотр
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Нужно добавить цель на кнопки

26 апр. 2024, в 12:22

500 руб./за проект

Требуется доработка самописного проекта по ТЗ

26 апр. 2024, в 12:22

3500 руб./за проект

Парсер на Python для ТГ-каналов

26 апр. 2024, в 12:11

4000 руб./за проект

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

Нужен код в примитивных формах и описание/картинка как это вообще должно быть
Мне не нужно, чтобы подвал всегда виден был. Нужно, чтобы на страницах с малым количеством контента, он не отлипал от низа страницы.
При том, что событие scroll не срабатывает в данном случае.
Muvka, скинул вам пример, все там работает.
Комментаторы, вы знаете, что такое "Прижать подвал к низу страницы"? Если нет, идите гуглить. Какие fixed и sticky?

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

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

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

Answer 1 · 2018-12-22 13:59:34

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

Answer 2 · 2018-12-22 13:43:11

tyzberd @tyzberd

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

Ответ написан более трёх лет назад

2 комментария

Answer 3 · 2018-12-22 13:21:38

ortsuev33 @ortsuev33

Min-height:100%;

Ответ написан более трёх лет назад

1 комментарий

Answer 4 · 2018-12-22 13:26:07

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

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

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

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

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

Минуточку внимания

Войдите на сайт