Footer встает по середине экрана на главной странице, как сделать снизу?

Question

[fjdfjdfjd2020]

Такая проблема , на главной странице футер встает по середине экрана , на другой с помощью позиции прикреплен снизу , не пойму что на главной ему мешает закрепиться снизу? Если можно то поправьте код . https://codepen.io/artemper33/pen/rNjdaOv

Comments

[Ankhena]

Когда что-то в разметке ведет себя странно, первое куда нужно идти это валидатор https://validator.w3.org/nu/
А потом уже, исправив всё, можно и на Q&A.

Лайвхак: приличные редакторы кода подсвечивают ошибки прямо при разработке.
Вот, даже jsfiddle намекает https://jsfiddle.net/0zd3wa52/

[Ankhena]

fjdfjdfjd2020 и зачем вы меня позвали сюда еще раз через полчаса, если не сделали того, что я написала выше?
Сначала, нужно сделать код валидным, а потом разбираться с тем, что будет.

Поправите - позовите, посмотрю.

Но добавлю, что в современном мире футер прижимается к низу окна не абсолютом, а гридами.
Пример: https://jsfiddle.net/k17pw6js/

Answer 1

[ThunderCat]

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

Answer 2

[Константин Данилов]

position: relative; пропиши в body )

Comments

[fjdfjdfjd2020]

Cпасибо

[fjdfjdfjd2020]

Теперь на второй странице футер закрывает текст , https://codepen.io/artemper33/pen/NWdYPwv

[Константин Данилов]

fjdfjdfjd2020, c bottom у footer поиграть надо, вместо 0 другое значение, https://html5book.ru/css-position/ вот, очень хороший сайт, поможет разобраться во всём

Answer 3

[twobomb]

Добавьте в body position:relative;

Comments

[fjdfjdfjd2020]

Спасибо

[fjdfjdfjd2020]

Теперь на второй странице футер закрывает текст , https://codepen.io/pen/

[twobomb]

fjdfjdfjd2020, Вы ссылку на пустой пен кинули, ну добавьте маргин или паддинг снизу на высоту футера, должно помочь

[fjdfjdfjd2020]

twobomb, https://codepen.io/artemper33/pen/NWdYPwv

[fjdfjdfjd2020]

twobomb, Просто в футере стоит position: absolute; на других страницах он снизу , когда добавляешь к бади position:relative; то на главной встает нормально , а на других уже перекрывает контент.

[twobomb]

fjdfjdfjd2020, Добавьте в body
padding:0 0 152px 0;

[fjdfjdfjd2020]

twobomb, Тогда уже не получиться прижать футер на других страницах к низу ?

[twobomb]

fjdfjdfjd2020, Почему? Получиться. На первой странице у вас не залазил текст на футер только потому-что у блока .card-deck был margin-bottom: 200px;
На остальных нужно или также или падинг на бади