Липкий нижний колонтитул Райана Файта очень приятный, однако я обнаружил, что его основная структура не хватает *.

Моя базовая структура выбора:

Это далеко не все:

Трюк для того, чтобы закрепить нижний колонтитул, состоит в том, чтобы нижний колонтитул был привязан к нижней части его содержащего элемента. требует, чтобы высота нижнего колонтитула была статичной, но я обнаружил, что нижние колонтитулы обычно имеют статическую высоту.

    ...
    

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

   

     here be header
   
   
   

     here be content
   
   

Когда нижний колонтитул привязан к #main-wrapper, вам теперь нужно #main-wrapper наименьшая высота страницы, если ее дети больше. Это делается, если #main-wrapper имеет min-height в 100%. Вы также должны помнить, что его родители html и body должны быть такими же высокими, как и страница.

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 

   

     here be header
   
   
   

     here be content
   
   

Конечно, вы должны подвергнуть сомнению мое мнение, поскольку этот код заставляет нижний колонтитул упасть с нижней части страницы, даже если нет содержимого. Последний трюк заключается в изменении модели окна, используемой #main-wrapper, так что min-height из 100% включает в себя дополнение 100px.

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 

   

     here be header
   
   
   

     here be content
   
   

И вот он у вас есть липкий нижний колонтитул с вашей исходной структурой HTML. Просто убедитесь, что footer 's height равен #main-wrapper' s padding-bottom, и вы должны быть установлены.

Версия Flexbox

Если вам повезло, что вы можете использовать flexbox без необходимости поддержки старых браузеров, липкие нижние колонтитулы становятся тривиально легкими, и поддерживают нижний колонтитул с динамическим размером.

Трюк для получения нижних колонтитулов придерживаться дна с помощью flexbox - значит, чтобы другие элементы в одном контейнере были гибкими по вертикали. Все, что требуется, это оберточный элемент полной высоты с display: flex и, по крайней мере, один брат, значение flex больше 0:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

   

     here be header
   
   
   

     here be content
   
   

* Причина, по которой я нахожу ошибку в структуре Fait, состоит в том, что она устанавливает элементы .footer и .header на разных иерархических уровнях, добавив ненужный элемент .push.