Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

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

Создание сайтовПродвижение сайтовCss
Анонимный вопрос
  · 40,9 K
Первый
Александр Х.
18 нояб 2019

Лепим футер к низу на 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;}

Илья Трушков
< Frontend-разработчик /> "Это не похоже на настоящее описание" - сказал мне валидатор...  · 23 нояб 2018
Как только Вы задаете элементу свойство position : absolute, Вы выдергиваете его отрисовку из общей последовательности. То есть если у Вас будет большая страница, Вам придется ручками регулировать ее высоту, чтобы не возникло "залезания футера на контент". В наше время вполне уже можно сделать так: <body style="display: flex; flex-direction: column; height: 100%... Читать далее
Дмитрий Сибилев
3 декабря 2019
Илья, да, работает, но дело в том, что стандартная структура страницы body header main footer А у вас получается... Читать дальше
Евгений Юдин
Seo-оптимизатор  · 23 сент 2018  · rotgar.ru
Прижать footer бывает не такой легкой задачей, с которой сталкиваются веб-разработчики в процессе создания сайта. Чаще всего они приходят к различным костылям, которые в самый неподходящий момент имеют свойство падать. Парадокс в том, что есть готовое решение, которое подойдет любому проекту, о котором мало кто знает. На самом деле, каждый верстальщик встречался с... Читать далее
Егор
3 апреля 2019

Как только высота подвала становится "плавающей" то подвал становится поверх контента. Вариант плохой

IAmStudio
4 авг 2020  · i-am.studio
Отвечает
Арсений Матыцин
Вопрос старый как мир и решений много, среди них: 1. Выбить из потока подвал с помощью абсолютного или фиксированного позиционирования. 2. Задать общему контейнеру min-height: 100vh и контейнеру, который находится между подвалом и шапкой сайта задать flex-grow больше, чем у соседей. Родительский контейнер при этом должен быть флексовым, да. 3. Или рассчитывать на calc()... Читать далее
Первый
Mark Veles
Музыка, компьютеры, кино, хендмейд, программирование  · 15 нояб 2019
Решил проблему вот таким костылем) Можно конечно поиграться и с помощью @media задать разные параметры высоты под разные экраны. Но меня в целом этот вариант устроил. Можно конечно задать высоту подвала в %, но тогда в моем случае придется переделывать весь подвал. Так он чуть скрывается за пределами экрана. <div class="wrapper"> <header> <!--ШАПКА--> </header> <main> <... Читать далее
TOP.Studio
Полный комплекс онлайн-решений для бизнеса  · 9 авг 2019
Просто нужно задать минимальную высоту контентной части, вот и все. Например: Схематически у Вас сайт разделен на 3 основных блока .header, .content и .footer. Прописываете на .content {min-height:800px;}, 800px – подменяйте на свое значение и вуаля. > И еще один вариант, к родителю прописать: > display: flex; > justify-content: space-between; > flex-direction: column; Читать далее
андрей никитин
13 апреля 2020
это тоже не самый лучший вариант, так как на странице не всегда будет много контента, даи мониторы у всех разные... Читать дальше
Дмитрий Лодыгин
it-специалист, инженер человеческих душ, мечтаю о basic income.   · 25 февр 2019

Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.

Gregory
25 февраля 2019

ах если бы всё так просто было

Аркадий Скворцов
11 июн 2020
Я пользуюсь flex. Этот инструмент позволяет создать разметку страницы без каких либо костылей. <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="utf-8"> <title>Строим сайт на flex-box'е</title> <style type="text/css"> html, body { height: 100%; display: flex; flex-direction: column; margin: 0; } #pagewrap { height: 100%; display: flex; flex-direction: column; justi... Читать далее
Первый
Юрий Бузин
18 февр 2020
Я сыграл с футером так: сделал ему абсолютное позиционирование, bottom:0; фиксированную высоту 350px. У обертки (в моем случае body) задал min-height: calc(100vh - 350px) и position: relative; padding-bottom: 350px; Если высота футера динамичная, можно сделать через переменную, типа :root { --footer-height: 350px; } body{ position: relative; min-height: calc(100vh - var... Читать далее
Первый
Alexander
5+8+9=X  · 6 сент 2019
Можно воспользоваться простым вариантом: CSS: .people { position: relative; } .footer { position: absolute; bottom: 0; } HTML: <div class="people" > <div class="footer" > Фуфутерррр </div > </div > Читать далее
Гуся
14 октября 2020

Футер же залазить на контент будет :/