Современное решение «липкий нижний колонтитул» будет использовать flexbox .
tl; dr: : установите контейнер (тело) на display:flex;flex-direction:column и дочерний элемент (нижний колонтитул), который вы хотите переместить на margin-top:auto.
Во-первых, мы настроили тело так, чтобы оно "сгибало" свои элементы по вертикали, следя за тем, чтобы оно имело 100% высоты.
Затем мы устанавливаем flex: 0 0 50px для элемента нижнего колонтитула, что означает: «не расти, не сжиматься и иметь высоту 50 пикселей». На самом деле мы могли бы полностью опустить атрибут flex и просто использовать height:50px.
Мы можем безрассудно установить display:flex на такие вещи, как сам <body>, потому что у потомков гибкого контейнера есть неявное значение flex: 0 1 auto (иначе flex:initial), если оно опущено, что (почти) эквивалентно flex:none (сокращение от
flex:0 0 auto):
Размер изделия определяется в зависимости от его ширины и высоты. Это
сжимается до минимального размера, чтобы соответствовать контейнеру, но не увеличивается до
поглотить любое дополнительное свободное пространство в гибком контейнере. ( MDN )
Что касается липкой части, то это нижний колонтитул margin-top:auto дает нам то, что мы хотим. Применяемые в гибком контейнере, автоматические поля приобретают новое значение, вместо обычного «получить равное количество свободного пространства» они означают «поглощать ВСЕ доступное свободное пространство».
Из спецификации ( 8.1. Выравнивание с автоматическими полями ):
До выравнивания через justify-content и align-self, любое положительное
свободное пространство распределяется по автоматическим полям в этом измерении.
Заявлено больше просто :
Если вы примените автоматические поля к гибкому элементу, этот элемент будет автоматически
расширить указанную границу, чтобы занять дополнительное пространство в flex
контейнер
В сторону: «нормальный» подход к макету флексбокса, вероятно, будет заключаться в том, чтобы сгибать среднюю секцию от <div id="main>...</div> до 100% по вертикали, что также сделает нижний колонтитул "прилипшим" к основанию. Этот подход показывает нам, что гибкая блочная модель, на самом деле, достаточно гибкая, чтобы позволить нам изменять размеры / перемещать отдельные элементы.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}
<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>