В этой статье я расскажу о том, как прижать подвал сайта к низу страницы так, чтобы при масштабировании он оставался на своём месте и никуда не прыгал. Это не особо сложная задача, но у новичка, который только начал изучать HTML и CSS могут возникнуть с этим трудности.
Для начала необходимо обозначить HTML-разметку страницы: создать три элемента div с id=main, id=wr-content и id=footer.
<div id="main">
<div id="wr-content">
<!-- Тут какой-то контент -->
</div>
</div>
<div id="footer"></div>
Все div-ы находятся, естественно, внутри элемента body, задаём необходимые стили, чтобы футор стал на свое место.
Все блочные элементы занимают всё доступное место по ширине, но для реализации прижатого футора необходимо, что бы они заняли его и по высоте. Для этого применяем к элементам html и body свойство height со значением 100%.
html, body{
height: 100%;
}
Далее убираем «ненужный» margin у body в 8px и немного стилизуем страницу.
body{
margin: 0;
background-color: #c0deed;
color: #fff;
}
#main{
width: 760px;
background-color: gray;
margin: 0 auto;
}
#footer{
height: 150px;
width: 760px;
margin: 0px auto;
background-color: silver;
}
После того как html и body стали растянуты по вертикали, нам необходимо добавить ещё несколько основных свойств к элементу div с id=main:
min-height: 100%;
margin-bottom: -150px;
Значение нижнего отступа должно равняться высоте футера. Чтобы контент, расположенный в элементе c id=wr-content, не заезжал на футор задаём ему padding-bottom с тем же значением, что и у нижнего отступа.
Вот и всё страничка готова и footer прижат к низу.