Как прикрепить футер к нижней части страницы?

Question

Как прикрепить футер к нижней части страницы?

18 окт. 2017 г., 03:13:22

Просмотры: 61.1K

Голосов: 5

Мне нужно, чтобы футер сайта всегда находился внизу страницы.

В настоящее время он располагается внизу сайта, когда на странице есть контент, но при отсутствии контента футер (.site-footer) поднимается от низа к середине видимой страницы, как показано на этом изображении:

Мне удалось найти ответ на свой вопрос, и я опубликовал процесс поиска решения ниже:

Kelly

291

нижний колонтитул

Комментарии

Покажите немного кода.

Samuel Asor

18 окт. 2017 г. 03:14:08

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

Комментарии

Я пробовал использовать absolute безрезультатно, замена на fixed сработала - однако это означает, что футер останется зафиксированным при прокрутке, что не очень удобно

User

9 февр. 2018 г. 11:51:50

Добавьте CSS для вашего футера, это зафиксирует его положение внизу страницы.

    .site-footer{
     position:fixed;
     bottom:0px;
     left:0px;
     right:0px;
     width:100%;
    }

HeroWeb512

104

18 окт. 2017 г. 07:50:57

Комментарии

Это зафиксирует положение футера внизу страницы

HeroWeb512

18 окт. 2017 г. 08:25:00

Kelly 291 · Accepted Answer · 2017-10-18T03:15:45Z

Быстрый поиск показывает, что этот вопрос задавался и отвечался множество раз.

Из StackOverflow: Правильное прикрепление подвала к нижней части страницы

Из StackOverflow: Как заставить подвал прилипать к низу веб-страницы

Из CSS-Tricks: 5 различных способов сделать липкий подвал

Из Code Pen: Подвал «Всегда внизу»

Из WordPress: Как зафиксировать подвал в нижней части экрана?

Для своего ответа я использовал решение из WordPress:

.site-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
}

Kelly

291

18 окт. 2017 г. 03:15:45