Прижатый к низу футер

Проблема.

В обычной ситуации, если на странице не много контента и она не расстягивается на всю высоту, футер поднимается вверхи и оказывается не прижат к низу страницы.

Решение.

Делаем <body> флекс блоком с минимальной высотой равной высоте экрана.

А для блока с контентом main задаем правило растягиваться на все оставшееся пространство.

body {    
    display: flex;    
    flex-flow: column;    
    min-height: 100vh; 
}

main { 
    flex: 1;
}

Демо

results matching ""

    No results matching ""