Как меню привязать к низу страницы?

Question

[GoodPirojok]

Есть снизу меню, но часть страниц мало заполнены и на них это меню получается на 2/3 экрана весит от низа.
Как сделать так, чтобы оно всегда было снизу сайта?
При этом не фиксед, чтобы на длинных страницах оно не было вечно присутствующим, а на коротких было снизу.

Answer 1

[FabiBoom]

body {
 display: flex;
 flex-direction: column;

 min-height: 100vh;
}

.menu {
 margin-top: auto;
}

Comments

[Роман Дворянов]

Обяснение:
Это происходит потому, что тэг body имеет высоту находящегося внутри контента, поэтому ваше меню занимает свое место в потоке элементов, находясь в конце, но не с самого низа. Для опускания меню вниз не хватает контента на странице, Но!
если ему задать минимальную высоту в высоту экрана, как указано в примере, то body будет минимально на всю ширину. Теперь вы можете расположить ваше меню в самом низу body.

Задав это все флексбоксом с вертикальным направлением, вы сможете установить верхний отступ у меню с помощью margin-top, где auto будет означать все свободное пространство.

[GoodPirojok]

Спасибо!