1

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

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

Любые идеи?

2
  • йоу, чувак, вопросу 5 лет. какой дубль :D 4 янв 2017 в 13:58
  • 1
    @DenisMasster Тут играет роль практичность, а не время. Более подробно здесь. 5 янв 2017 в 6:17

5 ответов 5

3

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

4
  • спасибо) будем знать 11 мая 2012 в 15:39
  • @Barton Как вы, наверное, знаете, ответы-ссылки здесь не приветствуются. Перенесите с третьестороннеего ресурса код в ваш ответ. 5 янв 2017 в 6:23
  • @VadimOvchinnikov к сожалению не знаю, это было 3,5 года назад и копипастить смысла не вижу и не буду. Человек спросил совета, я привел ссылку с примерами. Его это устроило.
    – iurii_n
    6 янв 2017 в 14:50
  • @Barton Я часто редактирую ответы даже с десяткой плюсов. Обратите внимание, что этот вопрос просмотрели почти 10 тысяч человек. Эта информация не только для одного человека, который спросил, а для многих людей. Поэтому перенесите знания сюда. Может вы получите ещё больше плюсов, улучшив ваш ответ. 6 янв 2017 в 15:48
2

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

<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'
    })
}

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

1
  • 3
    ого какую дичь я писал 4 года назад! 4 сен 2016 в 22:30
2

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

$(window).resize(function() {
    //здесь ваша функция
});
2
#footer { position: relative; top: 100%; }
1
<div id="bottomdiv">Этот див всегда в низу</div>
<style>
#bottomdiv{
 position: absolute;
 bottom: 0px;
}
</style>
1
  • Зачем писать 0px? Просто 0
    – Crasher
    8 мая 2012 в 21:22

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.