Как прижать footer произвольной высоты к низу?

Question

[Avivar]

Здравствуйте.
Footer фиксированной высоты можно прижать через абсолютное позиционирование и отступ от основной части на высоту footer.
Но как прижимать footer в резиновых сайтах, когда при уменьшение ширины окна высота footer-а меняет и он начинает наезжать на основную часть страницы?

Answer 1

[iBird Rose]

https://jsfiddle.net/e7kxwwm8/

Answer 2

[dom1n1k]

В 2017 году всё-таки флекс-бокс. Уже можно :)
Без всякий хрени с дополнительными технологическими обертками.

Answer 3

[Максим]

проще всего на flex
но и position:relative; для родителя и position:absolute; для нужного элемента тоже не хило работает

Comments

[Сергей Горячев]

И нехилое высчитывание паддинга на JS, чтобы контент под подвал не прятался)
Присоединяюсь к решению на флексах)

[Максим]

Sergey Goryachev: я так и написал что флекс лучше

[Алексей Бурлака]

Sergey Goryachev:
>>> И нехилое высчитывание паддинга на JS, чтобы контент под подвал не прятался)
===
Разве box-sizing: border-box; не решает этот момент?

[teotlu]

Алексей Бурлака: не решает, естественно. Если что-то неизвестной высоты располагаешь абсолютом и хочешь в другом месте эту высоту как-то применить, поможет уже только JS.

[Максим]

teotlu: на js вроде не много манипуляций , я давно так делал

[Сергей Горячев]

Алексей Бурлака: не знаю, что ты имеешь ввиду.
https://jsfiddle.net/webirus/38yd5nwk/

[Максим]

Sergey Goryachev: у вас footer 100px в ширину ... фон поставьте и увидите

[Сергей Горячев]

Максим Ленский: да это не важно, тут пофик на его ширину)

[Сергей Горячев]

Максим Ленский: я просто набросал для отображения основного косяка, которому JS нужен.

[Максим]

Sergey Goryachev: codepen.io/Geyan/pen/oZdXRp?editors=110 а так пойдёт ?

[Сергей Горячев]

Максим Ленский: опять. это понятно, известный паддинг, без проблем. вопрос " Как прижать footer произвольной высоты к низу? " . я понимаю и знаю, как сделать на JS высчитывание, но собственно, я скидывал не тебе код, а Алексей Бурлака который предложил box-sizing , ему дал код, чтобы он набросал свои мысли. Так что ты не парься) я понимаю, как сделать нормально)

[Максим]

Sergey Goryachev: лан лан , я тоже знаю и без абсолютов и без флекса , на js или ваще до попы как , но я сделаю если потребуется

[Алексей Бурлака]

Sergey Goryachev:
>>> не знаю, что ты имеешь ввиду.
===
Всё, нырнул в код и понял, о чём речь.
Я вначале, как и рядом отписавшиеся, не сразу понял, что речь о плавающем футере, который виден на протяжении всего скролла и соответственно, в самом низу отступ от основной части до нижнего края вьюпорта должен быть в высоту футера, иначе текст не будет виден полностью. А так как футер "произвольной высоты..."

Answer 4

[Антон Антон]

используй таблицы, бро (сэмпл - fragster.ru :))

Comments

[Сергей Горячев]

Йопт, ну убери совет, а? А то ведь реально нахерачит)

[Антон Антон]

Sergey Goryachev: не, ну а чо. Работает же. Даже на мобилках.

[Антон Антон]

И в ие 6

[Сергей Горячев]

Антон Антон: ие 6 уже благополучно умер. И родственники до 10 колена скоро догонят.

[Сергей Горячев]

Антон Антон: а флексы с мобилками нормально дружат.

[Антон Антон]

Sergey Goryachev: ну, я тут в 2017 году делал вебморду для тсд на виндовс це. Ни о каких флексбоксах речи там и близко нет.

Answer 5

[Ivan Bogachev]

раз
два
три
четыре
пять
...вышел футер погулять!

Comments

[Алексей Бурлака]

Речь про плавающий футер.
Тут его нет:
https://codepen.io/anon/pen/qrYaaw