Мне несколько раз приходилось верстать страницы, которые требуют, чтобы футер был помещен у нижней границы окна браузера, если содержимого не много, или в самом низу страницы, если размеры содержимого страницы больше размеров окна.
Достаточно давно в одном из блогов был описан стабильный метод для решения этой задачи, не потерявший актуальности и по сей день.
html, body {
height: 100%;
}
#wrapper {
position: relative;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#content {
padding-bottom: 120px;
}
#footer {
position: relative;
margin: -100px auto 0 auto;
}
Макет страницы:
<html>
<body>
<div id="wrapper">
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>
Ключевым правилом, позиционирующим футер, является отрицательное значение margin-top . Когда контента мало, он естетсвенным образом, прикрепляется к нижней границе окна из-за действия height: 100% у тегов html и body . В случае, когда размер контента превышает размер окна, футер оказывается поверх блока-обертки, но padding-bottom заранее резервирует место для него.
Единственный недостаток решения состоит в том, что вы должны знать точную высоту футера.