Конфликт с липким нижним колонтитулом css

Question

Я пытаюсь использовать липкий нижний колонтитул, но, похоже, конфликт с моим css, я следую this учебнику, но я хочу знать, почему нижний колонтитул находится посередине страницы , что мне нужно сделать, чтобы исправить это.

Мой код:

jsfiddle.net/q2Vuq/

Answer 1

Причина, почему вы видите это странное поведение с липким колонтитула из-за вашего использования position:absolute; по ряду ваших элементов. А именно, те, которые завернуты в div #navigation.

Take a look at this (это JSFiddle просто иллюстрирует проблему более четко):

Я дал нарушившего все элементы цвета фона (как и тело), ​​так что вы можете видеть, что эти элементы фактически заставляя полосу прокрутки, чтобы выходить за пределы высоты тела. Абсолютное позиционирование фактически выводит их за пределы макета - это означает, что они не приводят к расширению своего родителя #navigation, что, в свою очередь, не приводит к расширению его родителя .page-wrap, что в конечном итоге приводит к тому, что нижний колонтитул не перемещается вниз. Нижний колонтитул укладывается в нижнюю часть тела (в результате липкого нижнего колонтитула CSS), который недостаточно мал, поскольку элементы с абсолютным расположением еще более расположены ниже (поскольку они игнорируются телом).

Итак, с учетом этого, как вы исправляете это поведение? К сожалению, ваш липкий нижний колонтитул основывается главным образом на предположении, что все содержимое будет фигурировано в макете над ним или, по крайней мере, что элемент обертки над ним будет достаточно высоким, чтобы учесть все его содержимое. Это затрудняет ваше использование абсолютного позиционирования.

Лучшим решением, вероятно, является удаление текущего использования элементов с абсолютным позиционированием в вашем документе и переделка того, как вы собираетесь размещать свои элементы. Поскольку я не знаю, на каком проекте вы на самом деле нацелились, я не могу привести пример этого. Альтернативой является размещение внутреннего оберточного элемента внутри .page-wrap с набором min-height таким образом, чтобы он опускался ниже даже самого нижнего элемента с абсолютным позиционированием. Однако этот второй метод не слишком гибкий, и я бы не рекомендовал его.

Если это не то, что вы искали, или вам нужна дополнительная помощь в этом конкретном вопросе, сообщите мне, и я буду рад помочь вам. Удачи!