Я иногда с этим боролся, и я всегда находил, что решение со всеми этими div внутри друг друга было беспорядочным решением. Я просто немного испортил его, и я лично узнал, что это работает, и это, безусловно, один из самых простых способов:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Что мне нравится в этом, так это то, что никакой дополнительный HTML не должен быть применяется. Вы можете просто добавить этот CSS, а затем написать свой HTML как всегда