Div перезаписывает нижний колонтитул

Question

У меня есть div и нижний колонтитул.Мой div используется только для отображения сообщений об ошибках.Когда div получает список ошибок, он перезаписывает нижний колонтитул.

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

Кто-нибудь знает, как оставить нижний колонтитул отзывчивым или другим решением, чтобы оно не потерялось на экране?

.box-errors {
overflow: auto;
min-height: 100px;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
line-height: 58px;
background-color: #000;
color: #ffffffc4;
font-size: 12px;
text-align: center;
}

Obs .: Нижний колонтитул черный, а div красный.

Answer 1

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  width: 100%;
  height: auto;
  line-height: 58px;
  background-color: #000;
  color: #ffffffc4;
  font-size: 12px;
  text-align: center;
}