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

Question

Zhalgas Saparov @zettt

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

HTML
CSS

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

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

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

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 подписчик
- 8 часов назад
- 71 просмотр
0

ответов
CSS

Простой
Как сделать бесконечно бегущую строку логотипов, но чтобы они двигались волной?
- 6 подписчиков
- 10 часов назад
- 425 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- 14 часов назад
- 102 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- вчера
- 114 просмотров
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- вчера
- 159 просмотров
2

ответа
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- 25 дек.
- 66 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 62 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 96 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 68 просмотров
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 78 просмотров
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Разработка акустического детектора bldc двигателей SigmaStudio

27 дек. 2024, в 23:00

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

Создание нарезок в вертикальном формате на основе стрим

27 дек. 2024, в 21:50

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

Разобрать большую пачку видеосигналов, снятого анализатором

27 дек. 2024, в 21:48

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

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 в конце страницы?

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

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

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