Bootstrap 3 - плавающий footer

Question

Мне нужен дизайн на моем сайте, где нижний колонтитул всегда присутствует на экране и плавает. Когда пользователь прокручивает нижний колонтитул, он перемещается вместе с ними. Я не продал себя по этой идее - но я думаю, что хочу связать с корпоративным материалом. Если это плохая идея, сообщите мне об ограничениях (возможно, на мобильном телефоне?).

Я видел проекты и примеры, которые имеют нижний колонтитул внизу страницы, но если это «ниже складки», пользователю необходимо прокрутить вниз, чтобы увидеть его. Нехорошо.

Может ли кто-нибудь предоставить мне основы, как это делается?

Заранее спасибо.

Answer 1

Bootstrap имеет класс, который делает то, что вы хотите: .navbar-fixed-bottom. Использование этого класса - лучшее решение, поскольку вам не нужен пользовательский css.

Однако, если вы действительно хотите использовать пользовательский CSS, вот как это сделать. Если предположить, что колонтитула элемент имеет ID, сноска ':

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; 
} 

И вы должны убедиться, что, когда пользователь прокручивает в нижней части страницы, футер не должен жаждать самое низкое содержание. Чтобы избежать этого, самым простым решением является добавление нижнего поля в элемент тела в том же размере, что и высота нижнего колонтитула. Предположишь, что ваш колонтитул элемента является 100px высоким, вы можете использовать этот код:

body { 
    margin-bottom: 100px; 
} 

Но чтобы убедиться, что вы избегаете колонтитула перекрытия вы должны использовать JQuery для обновления нижнего края тела на изменении размера экрана, потому что высота колонтитула может измениться, особенно в гибких макетах.