Столкнулся сегодня с задачей, как прижать div к низу страницы.
Стараюсь отходить от табличной верстки, поэтому использую только div для этих целей. И также везде применяю DOCTYPE, что бы сделать код максимально валидным.
Перечитал очень много способов как решить эту задачу, но вот, на мой взгляд, этот оказался самым изящным и коротким. В коде есть комментарии, так что, думаю, разобраться реально.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижимаем футер к низу с помощью csstitle>
<style type="text/css">
html, body{
padding:0;
margin:0;
height:100%; /* Задаём 100% высоту для html и body */
position:relative; /* Если этого не задать, в Опере почему-то футер не прижимается сразу,
прижимается только после ресайза окна, какой-то странный глюк*/
}
#container{
background:#CCC; /* Просто, чтобы было видно контейнер */
min-height:100%; /* Задаем минимальную высоту 100% */
_height:100%; /* Задаем высоту 100% в ИЕ6 с помощью хака */
}
#main{
padding-bottom:50px; /* Задаём нижний отступ, равный высоте футера, можно задать и больше,
но главное, чтобы не было меньше, иначе футер налезет на контент*/
}
#footer{
background:#36F;
height:50px; /* высота футера */
margin-top:-50px; /* отрицательный маргин, равный высоте футера */
position:relative; /* Чтобы футер "всплыл" из под дива #container, если этого не сделать,
то ссылки в футере не кликабельны и нельзя выделить текст*/
}
style>
head>
<body>
<div id="container">
<div id="main">
Счастье – это когда есть всё: от А до Футер. Вот и появились первые упоминания о Футер в наших беседах.
Правда это было достигнуто не с использованием бубна, набора напильников и чтения мантр, а просто вы набрали слово «Футер»,
но все же результат оказался впечатляющим. На место Сократа я не претендую, но все-таки считаю, что Футер – это и есть смысл жизни человека.
Впервые увидев Футер, понимаешь: рай бывает не только утраченным, но и обретенным. Футер – это совершенный выбор.
Часто владелец компании забывает, что для повышения лояльности работников важен набор не только материальных стимулов, но и моральных.
Подводя итоги в конце отчетного периода, устраивайте конкурсы, например, «Лучший Футер». Это все создает внутренний PR.
Недавно в и-нете был анонсирован новый проект. Люди так красиво расписали свою идею: борьба с совком, жалобы, претензии и т.д.
Захожу я на проект и вижу на их рекламном баннере Футер... Все, чтобы ни происходило с вами в жизни, принимайте, как Футер,
который вы даете сами себе. Футер холодный, а душу греет. Вот, например, художники. Они проводят месяц, рисуя синий Футер,
поскольку именно эти картины знаменитые коллекционеры покупают в этом сезоне, а следующий месяц проводят, рисуя красный Футер,
потому что вообще-то презирают синий цвет и любят красный. А вот «Ретуф» – это Футер наоборот.
© Генератор светских бесед
div>
div>
<div id="footer">
© Прижимание футера к низу
div>
body>
html>
?>
