Почему футер не прижимается к низу страницы?

Question

[Dude-1]

Приблизительная схема:

<header></header>
<div class="main">
<div class="test1"></div>
<div class="test2"></div>
</div>
<footer></footer>

Проблема в том, что когда я указываю main высоту в пикселях, то футер прижимается к низу. А когда ставлю auto, то не прижимается. Что должно соблюдаться у всех div'ов, чтобы такой проблемы не было?

Answer 1

[snap44]

body {display: flex;
	flex-direction: column;
	min-height: 100vh;}
.main {flex: 1;}

Но что-то мне подсказывает что так у вас возникнет еще больше вопросов. Найдите эту книгу

UPD: и забудьте про jquery пока не научитесь верстать.

Answer 2

[Dima Polos]

Высота зависит от высоты контента, если его будет мало, чтобы высота блоков заняла всю высоту вьюпорта, то и футер не будет прижиматься к низу. Если вы выбрали тег футер, это не значит, что он автоматически будет внизу, напишите его вместо шапки и все равно все будет работать) Футеров может сделать бесконечно много.
Сверху написали, как прибить его. Вот еще вариант:
body
position: relative
padding-bottom: 100px
footer
position: absolute
bottom: 0
height: 100px
100px - это например высота вашего футера, может быть любой.

Comments

[Dima Polos]

Чтобы не писать высоту жестко можно через js назначать padding для body и высоту для footer.

Answer 3

[Арслан Агаев]

html {height: 100%}

body {
margin: 0;
min-height: 100%;
display: grid;
}