Задать вопрос
@ma4t
html

Как прижать footer?

Привет, как прижать футер страницы, но таким образом, если между хедер и футер много контента, то футер как обычно в самом низу, а если удалить несколько элементов и всю помещается по высоте в окно браузера, футер должен быть внизу без скролла.

Имею ввиду, примеры, которые нагуглил все работают так, у меня много контента, я удаляю их очередно, все помещается в окно, но сохраняется прежняя высота и в итоге чтобы увидеть футер надо прокрутить скролл, а мне надо чтобы он поднимался вслед удаляемым частям.
  • Вопрос задан
  • 182 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
По этой ссылке есть мой ответ:
Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

P. S. При удалении контента — он удаляется из DOM, поэтому не может занимать место. Либо у вас контент не удаляется, либо вы использовали какие-то странные JS-решения для прижатия подвала.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 3
mcmraak
@mcmraak
php+sql+js+bicycle+crutches
Я для этого использую такой метод: В основе вёрстки два блока:
HTML
<body>
    <div id="Wrapper">
        Тут остальной сайт
    <div>
    <footer>
        Тут футер
    </footer>
</body>

CSS
#Wrapper {
    display:inline-block;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 100px);
}
footer {
    height: 100px;
}
Ответ написан
Комментировать
Комментировать
kanonir1886
@kanonir1886
https://jsfiddle.net/9aqbo85e/1/

есть еще такой вариант:
https://jsfiddle.net/g3dacezy/
Ответ написан
Комментировать
Комментировать
leonidshishkin
@leonidshishkin
Тянусь к знаниям)
Можно использовать flexbox и присвоить футеру margin-top:auto. Тогда footer всегда будет в самом низу.
Чтобы body был не меньше высоты экрана пишем для него min-height: 100vh.

HTML
<body>
    <div id="Wrapper">
        Тут остальной сайт
    <div>
    <footer>
        Тут футер
    </footer>
</body>


CSS
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Создание бота/скрипта для сайта забронирование мест
26 апр. 2024, в 00:10
30000 руб./за проект
Ещё заказы