CSS: почему футер на крепится к низу?

Question

[Discout]

Нужно сделать футер внизу страницы. Без слайдера с обложками альбомов всё работает как надо, но с ним футер "плывёт", закрывая часть контента слайдера. Полагаю, это из-за инлайн-блоков, которые держат картинки. Но почему это имеет значение, если эти блоки обвёрнуты в обычный div?
Здесь можно просмотреть страницу: mycodetest.hol.es/example1.html

Заранее спасибо.

Answer 1

[Андрей Голуменов]

У вас у футера position: absolute и bottom: 0
Футер лежит внутри блока с классом "latest-work-fix" соответственно он позиционируется абсолютно по отношению к этому блоку.

Попробуйте указать для футера bottom: -100px;

Comments

[Discout]

Спасибо за коммент. Да, был мой косяк, но сейчас исправил. Если можете, гляньте плз ещё разок. Сейчас footer относительно wrap и по идее не должен накладываться на слайдер. Но всё же накладывается. Не могу понять, где я туплю. И не понимаю, почему это из-за инлайновых элементов, если они обвёрнуты в блок div.

[Андрей Голуменов]

Уберите position: absolute у футера и он встанет под слайдер

[Discout]

Но тогда не знаю, как закрепить футер внизу. Вот что выходит: i67.fastpic.ru/big/2014/0819/f1/daab9662ce93221819...

[Андрей Голуменов]

Укажите для footer bottom: -120px;

[Discout]

Я понимаю, что в принципе можно просто отодвинуть, но хочу понять, почему наложение происходит. Просто, чтобы действовать правильно в дальнейшем.

[Андрей Голуменов]

Да фиг его знает=) У вас там понаверчено всего и всякого=) bottom: -120px; это то, что нужно в вашем случае - футер внизу страницы вплотную к низу, не перекрывает контент.
Я бы копал в сторону html height: 100%, body height: 100%, content-container height: 100% + внизу отступ по высоте футера

[Discout]

Ладно, спасибо. Так и сделаю, наверное.

Answer 2

[Евгений Петров]

Причина тут

div.container.wrap-slider{
	margin-top: -120px;
}

Update: Почему разработчики не могут прочитать спецификацию? А окружающие начинают придумывать костыли. Я бы задумался, почему нужно подвинуть на 120 пикселей, если ровно такое же значение у отрицательного margin.

Comments

[Discout]

К сожалению, не помогло. Удаляя margin-top всё просто съезжает наверх вместе с футером. Наверное, меня одно только интересует - почему вообще футер наезжает на слайдер с картинками (либо висит между низом страницы и слайдером, если окно широкое.)? Почему при, когда есть слайдер, то футер не крепится к низу, а когда нет слайдера - крепится. Из-за инлайн картинок? Но они же обвёрнуты в один div. (Нижний слайдер. Верхиний-то ни при чём, я думаю.)

[Discout]

То есть вот что происходит без margin: i67.fastpic.ru/big/2014/0819/c1/91d07f98ca56389e68...

[Евгений Петров]

@Discout как же трудно донести свою мысль, когда вы отвлекаетесь на ерунду...
Вот с margin jsfiddle.net/petroveg/mzb9wt4j
А вот без margin jsfiddle.net/petroveg/mzb9wt4j/1

А на досуге почитайте про collapsing margin.

[Discout]

@Petroveg Спасибо. Теперь разобрался.

Answer 3

[Виталий Киренков]

У вас проблема в последовательности дивов. Элементарно отрываете FireBug и видите, что футер у вас лежит внутри блока с последними работами, а должен, я так понимаю по соседству с #wrap

Answer 4

[Discout]

#wrap - это обвёртка для всего контента. Слайдер обёрнут в: <div class="container-fluid latest-work">
p.s. Да, действительно, у меня был лишний div, спасибо что заметили. Но он ни на что не влиял, увы, так что всё по-прежнему.

Comments

[Виталий Киренков]

Да вытащите вы футер из него!!! написал же, в самом начале. Футер не относится к контенту.

[Discout]

Если вытащить, то как зафиксировать внизу футер? Чтобы независимо от того, сколько будет контента, футер оставался внизу. А во wrap обернул специально. Т.к. футер позиционируется абсолютно, относительно wrap. Вот здесь у меня получилось это: mycodetest.hol.es

[Discout]

И в первом примере получится, если слайдер вынуть и вложить за место него другой див, например.