1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!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>Прижимаем футер к низу с помощью css</title> <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> |