Футер внизу экрана

Не редко бывают случаи, когда в html-верстке необходимо спозиционировать футер так чтобы при малом контенте он всегда был прижат к низу экрана, а сам контент был растянут до футера.

Знаю 2 способа решения такой задачи...

Вариант 1

В этом варианте блок контента растягивается на всю высоту окна, footer с помощью отрицательного значения margin-top смещается вверх.

 

 

<html>
<body>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</body>
</html>
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#content {
position: relative;
min-height: 100%;
}
* html #content {
height: 100%;
}
#footer {
position: relative;
margin-top: -2.5em;
height: 2.5em;

 

Вариант 2

В этом варианте на всю высоту окна растягивается 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;
}

Так или иначе, получаем футер прижатый  к низу экрана при маленьком контенте и футер, отталкиваемый книзу при большом контенте.

 

Добавить комментарий


Защитный код
Обновить