Вот небольшой сниппет, которым я пользуюсь почти во всех проектах.
В этом варианте на всю высоту окна растягивается body, а footer абсолютно спозиционирован относительно нижней его части. Нижний padding блока контента следует сделать больше и равным высоте footer.
<html>
<body>
<div id="header"> header </div>
<div id="content"> content </div>
<div id="footer"> footer </div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
#header {
height: 3em;
width: 100%;
}
#content {
padding-bottom: 2.5em;
}
#footer {
height: 2.5em;
width: 100%;
position: absolute;
bottom: 0;
}
Простой
