Где будет работать?
Во всех браузерах будет, даже в вашем любимом :-). Только не забываем объявлять документ как xhtml transitional.
Что делать?
1. В body должно быть всего 2 дива – большой див .height100 и див подвала .footer
<body>
<div class="height100">
...
</div>
<div class="footer">
...
</div>
</body>
Обратите внимание на то, что футер ни в коем случае не должен быть внутри большого дива.
2. В большом диве .height100 содержиться все, кроме подвала. Это ваш новый body. Там могут быть хедеры, контенты и вообще все, что угодно.
3. В таблице стилей мы должны прописать следующее:
body, html {
height:100%;
}
.height100 {
min-height:100%;
_height:100%; // это хак для вашего любимого браузера
}
.footer {
height:40px;
width:100%; // ширину задали, потому что абсолютно позиционируемый блок
position:absolute;
margin-top:-40px; // смещаем вверх с помощью margin ровно на высоту футера
z-index:20; // позицию слоя задали, чтобы был точно выше большого дива
}
Не забудьте учесть, что футер накроет большой див на величину своей высоты. Но большому диву нельзя задавать снизу ни margin ни padding, потому что margin сместит футер еще ниже, а padding растянет высоту большого дива на свою величину и у вас появится несимпатичная полоса прокрутки при коротком тексте. Поэтому margin или padding надо задавать уже блокам внутри большого дива.
Интересует профессиональная разработка сайтов? В таком случае настоятельно рекомендуем Вам обратиться ща помощью к специалистам компании, официальный сайт которой расположен по ссылке kesso.cz. Профессионалы своего дела будут рады помочь вам!
Подробнее...