Прикрепление футера к низу страницы на HTML/CSS
2015-10-19
Михаил Ведерников
HTML
<body>
<div class="page-wrapper">
<div class="page-buffer">
<div class="header"></div>
<div class="content-wr"></div>
</div>
</div>
<div class="page-footer"></div>
</body>
CSS
html,
body{
height: 100%;
}
body{
margin: 0;
padding: 0;
}
.page-buffer{
height: 100%;
padding-bottom: 40px;
}
.page-wrapper{
min-height: 100%;
background-color: cornsilk;
}
.page-footer{
height: 40px;
margin-top: -40px;
background-color: lightseagreen;
}
Важно что бы у всех родителей до body включительно height должен быть 100%. Пример с бутстраповским контейнером:
.container {
height: 100%;
}
добавьте свой комментарий