Почему позиция закреплена не работает для нижнего колонтитула

Question

Я только что узнал о позиции в CSS. Я подумал, что это действительно круто и избавляет от необходимости писать JS-функцию для этого простого поведения.

Итак, я решил попробовать. В следующем примере верхний колонтитул торчит вверх, но я не понимаю, почему нижний колонтитул не торчит внизу:

body {
  height: 180vh;
  padding: 0;
  margin: 10px 0;
}

header,
footer {
  position: -webkit-sticky;
  position: sticky;
  padding: 10px;
  color: #ffffff;
  text-align: center;
}

header {
  top: 0;
  background-color: brown;
}

footer {
  bottom: 0;
  background-color: #2d3142;
}

<header>I'm sticking to the top of the page</header>
<footer>I'm sticking to the Bottom of the page</footer>

Почему это?

Answer 1

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

.alwaysBottom {
    position: absolute;
    bottom: 0;
}