Почему футер не прижимается к низу страницы?
body {display: flex;
	flex-direction: column;
	min-height: 100vh;}
.main {flex: 1;}
Но что-то мне подсказывает что так у вас возникнет еще больше вопросов. Найдите эту книгу
UPD: и забудьте про jquery пока не научитесь верстать.
Высота зависит от высоты контента, если его будет мало, чтобы высота блоков заняла всю высоту вьюпорта, то и футер не будет прижиматься к низу. Если вы выбрали тег футер, это не значит, что он автоматически будет внизу, напишите его вместо шапки и все равно все будет работать) Футеров может сделать бесконечно много.
Сверху написали, как прибить его. Вот еще вариант:
body
   position: relative
   padding-bottom: 100px
footer
   position: absolute
   bottom: 0
   height: 100px
100px - это например высота вашего футера, может быть любой.