Как прижать подвал к низу экрана
Когда на странице сайта мало контента, то при обычной блочной верстке подвал (он же футер) прижимается кверху, хотя по логике вещей должен бы находиться внизу экрана. Но так уж устроены браузеры, что все содержимое страницы кучкуют вверху экрана, занимая плотно все свободное место. Особенно бестолково это выглядит, когда дизайнер рисует футер в виде земельки с травками и прочими жучками. Тут уж хочешь не хочешь, а надо как-то придавить непослушный подвал к низу монитора, вне зависимости от количества контента на странице.
В своей книге о верстке 3-х колоночного шаблона для ВП я уже рассказывал, как этого можно добиться. Но решил вынести темку в отдельный пост, так как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и уважуха!
Итак, принцип следующий: если мы верстаем страницу, помещая все блоки в один общий контейнер, то блок футера нужно вынести за пределы контейнера. При этом нужно обоим блокам задать относительное позиционирование (position: relative;), в блоке контейнера добавить внизу пустую блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение. В листе стилей у блока контейнера будет задана минимальная высота в 100%. Получится, что контейнер у нас распространится на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его “подтянем” вверх на отрицательную высоту. То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще.
Пользователи Вордпресса знают, что для этого замечательного движка существует масса плагинов — специальных расширений, позволяющих увеличить стандартный набор функций. Наслышаны, а многие и пользуются таким известным плагином как