Давно хотел это сделать (прибить «подвал» к полу) — как ни крути, а «Copyright 2008» по среди экрана
выглядит не козырно. Есть статьи по этому поводу, но ни одного дельного совета я так и не нашел.
Даже парни из LayOut Gala не утруждают себя этим вопросом, хотя занимаются полнейшей мистикой с отрицательными полями, получая при этом «резину» любого вида. Именно они натолкнули меня на мысль использовать отрицательное верхнее поле(margin-top) футера — за это им отдельное спасибо.
Перейдем к делу. Тем, кто написал в этой жизни хотя бы пару css кодов самостоятельно советую пропустить нижеследующие разъяснения и посмотреть сам код в конце страницы. Кому лень разбираться самому попробую обьяснить на пальцах в чем тут дело:
В тэг body помещаем box (он же div, он же блок) с минимальной высотой 100%:
Для ie6 пишем волшебное заклинание:
Сразу под «контейнер» запихиваем «подвал» с необходимой нам высотой в пикселах и назначаем ему margin-top, равный высоте подвала, взятой с отрицательным знаком (допустим высота нашего «подвала» 50px):
Если контента( текста, фоткок и всего такого) больше, чем на один экран, то он залазит на футер (смотрим), поэтому в «контейнер» кладем див (я назвал его антифутер) с высотой, равной высоте футера:
Вот собственно и все.
Что хочу добавить:
— не забываем про DOCTYPE:
— в начале css необходимо написать следующее: body, html { margin: 0; padding: 0; width: 100%; height: 100%; } (без этого в некотрых браузерах height:100% не работает).
готовый код:
Тестируем здесь
В ie5 — не проверял, так как мои знакомые по большей части пользуются разработками какой-то компании, занимающейся фруктовым бизнесом, в остальных браузерах все работает отлично при любом количестве контента:
Opera… .+
FireFox ....+
Safari.......+
IE… .+
NN ...........+
Спасибо dmmd за помощь в создании кода.
выглядит не козырно. Есть статьи по этому поводу, но ни одного дельного совета я так и не нашел.
Даже парни из LayOut Gala не утруждают себя этим вопросом, хотя занимаются полнейшей мистикой с отрицательными полями, получая при этом «резину» любого вида. Именно они натолкнули меня на мысль использовать отрицательное верхнее поле(margin-top) футера — за это им отдельное спасибо.
Перейдем к делу. Тем, кто написал в этой жизни хотя бы пару css кодов самостоятельно советую пропустить нижеследующие разъяснения и посмотреть сам код в конце страницы. Кому лень разбираться самому попробую обьяснить на пальцах в чем тут дело:
В тэг body помещаем box (он же div, он же блок) с минимальной высотой 100%:
#container { min-height: 100% }
Для ie6 пишем волшебное заклинание:
*html #container { height: expression(document.body.clientHeight > 50? "100%" :"50px"); }
Сразу под «контейнер» запихиваем «подвал» с необходимой нам высотой в пикселах и назначаем ему margin-top, равный высоте подвала, взятой с отрицательным знаком (допустим высота нашего «подвала» 50px):
#footer { height: 50px; margin-top: -50px; background: #cccccc; }
Если контента( текста, фоткок и всего такого) больше, чем на один экран, то он залазит на футер (смотрим), поэтому в «контейнер» кладем див (я назвал его антифутер) с высотой, равной высоте футера:
#antifooter { width: 50px; }
Вот собственно и все.
Что хочу добавить:
— не забываем про DOCTYPE:
— в начале css необходимо написать следующее: body, html { margin: 0; padding: 0; width: 100%; height: 100%; } (без этого в некотрых браузерах height:100% не работает).
готовый код:
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=windows-1251"> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> body, html { margin: 0; padding: 0; width: 100%; height: 100%; } #container { width: 100%; min-height: 100%; } #antifooter { width: 100%; height: 50px; } #footer { width: 100%; height: 50px; margin-top: -50px ; background: #cccccc; } *html #container { height: expression(document.body.clientHeight > 100? "100%" :"100px"); } </style> </head> <body> <div id="container"> Thi is the Small-Small Content <div id="antifooter"> </div> </div> <div id="footer"> Text to this section</div> </body> </html>
Тестируем здесь
В ie5 — не проверял, так как мои знакомые по большей части пользуются разработками какой-то компании, занимающейся фруктовым бизнесом, в остальных браузерах все работает отлично при любом количестве контента:
Opera… .+
FireFox ....+
Safari.......+
IE… .+
NN ...........+
Спасибо dmmd за помощь в создании кода.