Как прижать футер к низу экрана?

Question

[vittallyyaaa]

У меня на сайте не прижимается, пробовал разные варианты, те, что есть в подобных вопросах тоже. Был бы рад получить помощь

вот сайт, смотреть только на гл странице
https://musical-duckanoo-3d12e0.netlify.app

Comments

[Ankhena]

У вас написано grid-template-rows: 1fr max-content;
А теперь посмотрите что у вас там с дочерними элементами в body и кто на самом деле должен растянуться на всё оставшееся место.
И высоту body задайте как min-height: 100vh для простоты.

И флоаты для сеток никто давно не использует

Answer 1

[Алексей]

родитель {
position: relative;
height: 100vh;
}
Дочерний{
position: absolute;
bottom: 0
}

Comments

[vittallyyaaa]

Можно конкретнне, что значит родитель и дочерний?

[Алексей]

vittallyyaaa Родитель - блок в который вложен дочерний элемент

<div я родитель>
<div я дочерний> </div>
</div>

[Ankhena]

Алексей, какой еще абсолют для футера в 2023 году при наличии флексов и гридов?

[Алексей]

Ankhena, в 2023 запретили их использовать?

[Ankhena]

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

Зачем рекомендовать весь этот бардак, при наличии флексов и гридов?

Answer 2

[Noder SS]

Если у вас правильно написан код, то этот вариант должен помочь, всегда им и пользуюсь(первый способ). Кстати, на мобилках сайт слетает. (А у футера точно не position:absolute? Как-то странно он себя ведет)