Footer растягивается/множится на всю страницу

Question

Footer растягивается/множится на всю страницу

opasno Знаток (380), открыт 2 дня назад

При изменении масштабирования на сайте футер растягивается/множится на всю страницу вот так:

Я хочу сделать так чтобы такого не было и он был закреплен внизу сайта
Исходный код:
CSS:
.footercontainer {
color: #242424;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}

.footername {
flex-grow: 1;
}

footer {
display: flex;
flex: auto;
}

HTML:
<footer id="footer" class="footercontainer">
<h2 class="footername">52</h2>
<h2 class="footername">25</h2>
<h2 class="footername">32</h2>
<h2 class="footername">25</h2>
</footer>

Answer 1

Яков Гото Искусственный Интеллект (328370) 2 дня назад

А что ты еще хотел? У тебя флекс-контейнер не имеет фиксированного размера.

opasnoЗнаток (380) 2 дня назад

можешь рассказать по подробнее?

Яков Гото Искусственный Интеллект (328370) твой footercontainer должен иметь стили типа

 .footercontainer {
  position: fixed;
  bottom: 0;
}

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

Answer 2

Каркас вёрстки начинается с контейнеров высшего уровня (html, body). Не будет этого фундамента — этажи поедут.

Там посмотри:
https://codepen.io/VISTASTER/pen/JoPWVpK