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

Question

[Yevhenii K]

Да простят меня гуру сия паблика но, сил моих больше нет. Уже который час сижу, и не могу прижать проклятый футер. Нужно, что б в зависимости от количества данных на странице(main) он был прижат, мало в низу окна, много появляется скролл, а футер в низу.
Здесь моё мучение.
jsfiddle.net/ocuddx7d
Скажу сразу, ДА я использовал поиск гугла и тостера, но все, что я там нашел не помогло. Я конечно не отрицаю фактора своей неопытности(криворукости, кому как).
P.S. Заранее спасибо.

Answer 1

[Kirill Mokevnin]

Познайте flexbox. Для кроссбраузерности autoprefixer. После этого мир станет другим.

Answer 2

[Олег Спиридонов]

У меня на сайте реализовано аналогичное поведение футера, можете посмотреть реализацию там. Вкратце, при добавлении элемента на страницу (у меня добавляются товары в список) вызывается функция, которая проверяет, находится ли футер в видимой области, и в зависимости от этого добавляет или убирает футеру класс, который отвечает за положение футера (прижат/отжат).
Вот сама функция:

function togglefooter() {
	var $marker = $('#list');
	var $win = $(window);
		if ($win.scrollTop() + $win.height() - 55 < 55*$('#list').children().length + $marker.offset().top) {
			$('#control').addClass('navbar-default navbar-fixed-bottom');
			}
			else {$('#control').removeClass('navbar-default navbar-fixed-bottom');}
}

Не претендую на эталонность, но работает, меня это устраивает =)

Comments

[Евгений]

зачем поручать js работу css?

[Олег Спиридонов]

Наверное потому, что программер из меня не айс, использую те решения, до которых смог добраться и которые работают.

Answer 3

[artyvr]

использую вот это

Comments

[Михаил Чирский]

В вашем примере footer = 60px. Автор сказал, что он растягивается в зависимости от кол-ва данных, а вот flexbox прекрасно справится с подобной штукой.

[artyvr]

не спорю flexbox отличная штука)