Прикрепление футера к низу страницы на 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%;
}

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