Давно хотел это сделать (прибить «подвал» к полу) — как ни крути, а «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 за помощь в создании кода.