Как прижать футер к низу страницы CSS?
Как только Вы задаете элементу свойство position : absolute, Вы выдергиваете его отрисовку из общей последовательности. То есть если у Вас будет большая страница, Вам придется ручками регулировать ее высоту, чтобы не возникло "залезания футера на контент". В наше время вполне уже можно сделать так:
<body style="display: flex; flex-direction: column; height: 100%; height: -webkit-fill-available;">
<div style="flex: 1 0 auto;">
Здесь весь контент Вашего сайта
</div>
<footer style="flex: 0 0 auto;">
Здесь футер
</footer>
</body>
естественно, поддержка каких-нибудь очень-очень старых браузеров отпадает, так что на кросс-браузерность решения не претендую, но в остальном такая верстка прекрасно себя чувствует.
P.S. спустя 6 месяцев от ответа - интересно, почему столько минусов, если из всех ответов на вопрос мой - единственный рабочий :D
ну и да, если требовался на самом деле вариант прикленного футера, то
<div class="wrapper">
<!-- все блоки сайта, что угодно -->
<div class="footer">
<!-- содержимое футера -->
</div>
</div>
и в CSS:
.wrapper {
padding-bottom : 50px;
}
.footer {
position : fixed;
height : 50px;
bottom : 0;
}
P.P.S. если совсем уж по-хорошему делать, то конечно вместо <div class="footer"> надо использовать просто <footer>
Дмитрий Сибилев, спасибо за обратную связь)
никто ведь не мешает разделить хедер и контент на два блока, а внешний флексовый контейнер лишь обертка) на разных сайтах и проектах встречаю разные структуры страниц, но да, если у Вас жестко задано body -> header + main + footer, мой подход не сработает. Буду признателен, если напишете, как Вы со своей структурой управились чуть подробнее (можно просто ссылкой на js-fiddle)
"ну и да, если требовался на самом деле вариант прикленного футера" нет блть мне нужен на половину приклееный футер
Здравствуйте, такой вопрос:
По вашему совету не работает "прилепление" футера к низу. Скорее всего я делаю что-то не так, но не понимаю что хД
Codepen: https://codepen.io/gooseruby/pen/gOMaEeR
Гусик, яндекс не торопится оповещать о том, что поступил коммент-вопрос, так что если уже не актуально - что поделать :)
Вы задали обоим контейнерам (и 'container', и 'footer') свойство flex: 0 0 auto. Как я и писал, контейнеру, который мы хотим расширить, нужно дать flex: 1 0 auto
А блоки кода на кью зачем придумали?
.footer {
position : fixed;
height : 50px;
bottom : 0;
}Разве так не лучше? Ну если и не лучше, то компактнее и понятнее точно. Да и если копировать у вас в код, то будут пустые строки.
Как только высота подвала становится "плавающей" то подвал становится поверх контента. Вариант плохой
Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.
ах если бы всё так просто было
Лепим футер к низу на 0px, а перед ним подставляем нужной высоты блок, чтобы прокручивался до конца контент...
<div class="otstup"></div>
<div class="lepim"></div>
.otstup{padding-bottom: 50px;float:center;width:100%;height:50px;background:none;}
.lepim{position: fixed; bottom: 0; float:center;width:100%;height:50px;}
Футер же залазить на контент будет :/