Как зафиксироваться 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, тогда мой первый ответ. Будет внизу, даже если контента на странице мало.

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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 155 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 103 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 98 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 86 просмотров
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 36 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Разработка лэндинга-визитки для юридической компании

25 нояб. 2024, в 11:40

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

Сделать интеграцию amoCRM + Яндекс.Метрика по API

25 нояб. 2024, в 11:09

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

Разработка бота рассылок в Telegram

25 нояб. 2024, в 10:16

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

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

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

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

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