Как зафиксироваться footer в конце страницы?

Question

Zhalgas Saparov @zettt

UX/UI Web-designer, junior Vue.js devolper

HTML
CSS

Как зафиксироваться footer в конце страницы?

Как зафиксировать footer в конце страницы?
https://jsfiddle.net/7psb7d1o/

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

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

Подписаться 1 Простой 2 комментария

Ankhena @Ankhena Куратор тега CSS
https://jsfiddle.net/340z3t8h/
уберите у footer
//position: absolute; //bottom: 0;

Это для длинных страниц.
Для коротких - флекс или любой из древних методов, они гуглятся за 1 минуту.
Написано более трёх лет назад
Zhalgas Saparov @zettt Автор вопроса

Ankhena, Нашел способ. Добавил , а в стиле указал .clear{clear: both;}. И всё)

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

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

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

Zhalgas Saparov @zettt Автор вопроса

Только при скролле вниз, на пример: shop.kz

Написано более трёх лет назад
Фёдор Гребенников @grebennikovf
Тогда JS.
Замеряем высоту окна, потом на событие scroll реагируем сравнением текущего положения скролла с высотой окна. Если оно больше (пролистали первый экран), то добавляем футеру класс, содержащий в себе position: fixed

На примере для JQuery и хедера
function stickyHeader() { var header= $('header.header'); var windowHeight = $(window).height(); $(document).on('scroll', function() { if($(window).scrollTop() > windowHeight) { header.addClass('sticky'); } else { header.removeClass('sticky'); } }); }
Написано более трёх лет назад
Zhalgas Saparov @zettt Автор вопроса

Фёдор Гребенников, Извини, не правильно выразился. Хочу чтобы он располагался в конце страницы после контента в самом низу

Написано более трёх лет назад
Фёдор Гребенников @grebennikovf

zettt, тогда мой первый ответ. Будет внизу, даже если контента на странице мало.

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

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

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

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

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

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

CSS

Простой
Как сделать такую границу?
- 1 подписчик
- 15 часов назад
- 73 просмотра
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 23 часа назад
- 274 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- вчера
- 155 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- вчера
- 106 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- вчера
- 125 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 92 просмотра
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- 30 апр.
- 85 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- 30 апр.
- 74 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 103 просмотра
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Небольшой интерфейс на Nuxt 3 + Django

03 мая 2024, в 11:30

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

Разработка логотипа для фирмы обмена валют

03 мая 2024, в 10:56

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

Размещение контента на сайте

03 мая 2024, в 10:55

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

https://jsfiddle.net/340z3t8h/
уберите у footer
//position: absolute; //bottom: 0;

Это для длинных страниц.
Для коротких - флекс или любой из древних методов, они гуглятся за 1 минуту.
Ankhena, Нашел способ. Добавил , а в стиле указал .clear{clear: both;}. И всё)

Answer 1 · 2017-11-22 21:37:31

Футер должен быть приклеен книзу при скролле? Или просто всегда быть внизу при любой длине страницы?
Если второе, то либо "старое доброе решение":

<body>
<div class="page-wrapper">
 
<div class="page-buffer"></div>
</div>
<div class="page-footer">
 
</div>
</body>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    height: 50px;
}

Либо flexbox, либо js

Как зафиксироваться footer в конце страницы?

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

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

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