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

Question

[rinatoptimus]

Перепробовал много вариантов, в том числе
mystrd.at/modern-clean-css-sticky-footer
www.surfingsuccess.com/css/css-sticky-footer.html#...
galengidman.com/2014/03/25/responsive-flexible-hei...
www.zakharov.ms/footer
и тд.
Мне кажется, у меня какое свойство прописано или типа того, что мешает нормальной работе этих способов. Опытные мастера, не могли бы вы помочь разобраться?
https://egypt-prosper.codio.io/ - прижать его надо тут.

Comments

[rinatoptimus]

В данный момент использован способ отсюда mystrd.at/modern-clean-css-sticky-footer

[Максим]

По Попову учились верстать?)

[rinatoptimus]

might: Учусь только, первые шаги делаю, так сказать, а Попова стараюсь обходить)

[rinatoptimus]

might: А много да, косяков?

[Максим]

rinatoptimus: я особо не смотрел косяки, но то, что сразу в глаза бросилось - это очень много id. Лучше вместо них классы использовать.

Answer 1

[monochromer]

html, body {
   height: 100%;
}
#wrap {
    min-height: 100%;
}

На всякий случай можно еще поставить распорку высотой с footer, чтобы он не наползал на вышестоящие элементы при уменьшении окна.
Например, так

#wrap:after {
    content: '';
    display: block;
    height: "высота футера";
}

Comments

[rinatoptimus]

Спасибо, к сожалению, не помогло.

Answer 2

[Сергей Некрасов]

html
{
position:relative;
min-height:100%;
}
body
{
height: 100%;

}
footer
{
position: absolute;
bottom: 0;
width: 100%;
}

Answer 3

[Александр Решетняк]

https://codepen.io/axelaredz/pen/zeKdWx