Прижать элемент к низу экрана, если нету прокрутки

Question

Добрый день. Можно каким-то образом сделать такое?

Есть элемент (див), он должен быть всегда прижат к нижней части экрана либо нижней части страницы, если есть вертикальная прокрутка.

Любые идеи?

йоу, чувак, вопросу 5 лет. какой дубль :D — Denis Masster, Jan 04 '17 at 13:58
@DenisMasster Тут играет роль практичность, а не время. Более подробно здесь. — Vadim Ovchinnikov, Jan 05 '17 at 06:17

score 3 · Accepted Answer · edited May 17 '20 at 18:23

3

Вот несколько примеров как прижать футер к низу страницы без JS. По аналогии можно прижать любой блок.

edited May 17 '20 at 18:23

Grundy

81,538

answered May 11 '12 at 06:26

iurii_n

3,886

спасибо) будем знать – Denis Masster May 11 '12 at 15:39
@Barton Как вы, наверное, знаете, ответы-ссылки здесь не приветствуются. Перенесите с третьестороннеего ресурса код в ваш ответ. – Vadim Ovchinnikov Jan 05 '17 at 06:23
@VadimOvchinnikov к сожалению не знаю, это было 3,5 года назад и копипастить смысла не вижу и не буду. Человек спросил совета, я привел ссылку с примерами. Его это устроило. – iurii_n Jan 06 '17 at 14:50
@Barton Я часто редактирую ответы даже с десяткой плюсов. Обратите внимание, что этот вопрос просмотрели почти 10 тысяч человек. Эта информация не только для одного человека, который спросил, а для многих людей. Поэтому перенесите знания сюда. Может вы получите ещё больше плюсов, улучшив ваш ответ. – Vadim Ovchinnikov Jan 06 '17 at 15:48

score 2 · Answer 2 · edited May 17 '20 at 18:25

2

#footer { position: relative; top: 100%; }

edited May 17 '20 at 18:25

Grundy

81,538

answered May 08 '12 at 11:24

Palmervan

9,350

Denis Masster · Answer 3 · 2012-05-10T18:22:04.780

Нет ребят, то что я хотел в конечном счете выглядит вот так:

<div id='container'> Основная часть сайта </div>
<div id='bottom'> Низ </div>
var forCenteredBottom=($(document).width()/2)-($('#bottom').width()/2);
if($('#container').height() + $('#bottom').height() < $(window).height() ){
    $('#bottom').css({
        position:'absolute',
        bottom: 0,
        left: forCenteredBottom
    })
}else{
    $('#bottom').css({
        position:'relative'
    })
}

В результате чего если при загрузке страницы сумма контейнера и боттома меньше чем вся высота окна, то боттом цепляется в низ экрана. Если больше, значит оставляем боттом как есть, и спокойно прокручиваем страницу.

ого какую дичь я писал 4 года назад! — Denis Masster, Sep 04 '16 at 22:30

Abmin · Answer 4 · 2016-09-08T16:31:54.807

Еще посоветовал бы вам добавить повторение вашей функции при изменении разрешения экрана. Например, пользователь вашего сайта зашел с планшета, все загрузилось, и тут он повернул планшет в альбомный вид. Тогда ваша разметка слетит, нужно чтобы при изменении разрешения ещё раз проверялась функция. На Jquery это делается так:

$(window).resize(function() {
    //здесь ваша функция
});

score 1 · Answer 5 · answered May 08 '12 at 11:03

1

<div id="bottomdiv">Этот див всегда в низу</div>
<style>
#bottomdiv{
 position: absolute;
 bottom: 0px;
}
</style>

answered May 08 '12 at 11:03

Rules

4,966
10
34
62

Зачем писать 0px? Просто 0 – Crasher May 08 '12 at 21:22

Прижать элемент к низу экрана, если нету прокрутки

5 Answers5

Linked