Почему не используется позиция: исправлено для «липкого» нижнего колонтитула?

Question

Я видел метод Райана Фейта для липкого нижнего колонтитула, а также один здесь и здесь .

Почему эти люди делают шаблоны для липких нижних колонтитулов, когда #footer{position:fixed; bottom:0;} будет достаточно?

РЕДАКТИРОВАТЬ:

Я добавлю, что использование position: fixed; для нижнего колонтитула нарушает margin: auto; центрирование (по крайней мере) в некоторых браузерах, что создает необходимость в теге-обертке. Часть моей проблемы с вышеупомянутыми методами - это дополнительные теги, которые сбивают с толку, синтаксически некорректны (для «пуристов HTML») и потребляют пропускную способность. Однако, по моему мнению, одна обертка вокруг нижнего колонтитула все же лучше, чем целый шаблон перемешанной страницы. И «мой» путь еще более прост и потребляет меньше пропускной способности.

Answer 1

Разница между использованием position: fixed и метода Райана Фейта ¹ довольно фундаментальна.

При использовании position: fixed нижний колонтитул всегда виден , и это не то, что пытается сделать липкий нижний колонтитул.
Смысл липкого нижнего колонтитула заключается в том, чтобы оставаться прилипшим к нижней части, , за исключением , если содержимое длиннее, чем высота области просмотра. В в этом случае липкий нижний колонтитул будет действовать как обычный нижний колонтитул, появляющийся чуть ниже содержимого страницы.

Здесь вы можете увидеть эффект липкого нижнего колонтитула. В окне результатов вы видите, что нижний колонтитул остается в нижней части страницы. Нажмите кнопку «Добавить контент», чтобы добавить контент, и вы увидите, что нижний колонтитул смещается вниз, чтобы оставаться ниже контента.

---

^{1. Это снимок от 10 января 2013 года с Wayback Machine, так как сам сайт Райана больше не содержит оригинального сообщения.}

Answer 2

Ладно, оставайтесь со мной в этом ответе :) Единственная разница между вашим методом и методом липкого нижнего колонтитула, как упомянуто в другом ответе, заключается в том, что липкий нижний колонтитул отображается только под всем содержимым главной страницы и никогда не покрываетсодержимое страницы.

Итак, чтобы исправить это, все, что вам нужно сделать, - это сделать содержимое главной страницы в простой оболочке div, для которой вы задаете позицию: относительный;верх: 0px;слева: 0px;и сделать Z-индекс больше, чем оригинал страницы.Единственное изменение, которое возникает в результате этого div, заключающего в себе содержимое страницы, заключается в том, что он помещается над исходными элементами страницы, поскольку z-index выше.Затем вы помещаете нижний колонтитул в html с позицией: fixed; bottom: 0px;и сделать z-index меньше, чем содержимое страницы и TA-DA!Нижний колонтитул никогда не появляется над содержимым страницы.Чтобы это работало, содержимое страницы должно иметь непрозрачный фон, чтобы покрыть нижний колонтитул.

Одно примечание: между этим и «липким» нижним колонтитулом все еще будет небольшая разница - липкий нижний колонтитул не «скользит»из нижней части содержимого страницы, как и вышеописанный метод при прокрутке вниз.Однако, поскольку это лишь небольшая разница в пользовательском интерфейсе, я думаю, что вышеописанный метод превосходит по простоте и производительности липкий нижний колонтитул.И некоторые люди могут подумать, что лучше, когда нижний колонтитул «выдвигается», как в методе выше.

Я думаю, что это должно полностью ответить на ваш вопрос.