Закрепить футер внизу страницы html/css

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

HTML

 

CSS

 

Результат:

 

 

Для того, чтобы закрепить футер страницы внизу воспользуемся относительными единицами измерения — vh. С их помощью можно задать блоку высоту, равную высоте окна браузера. Для этого зададим блоку .content свойство min-height: calc(100vh - 130px), где 100vh — полная высота окна браузера, 130px — высота шапки и футера (узнать можно с помощью режима разработчика в браузере. Для Chrome — f12). В итоге для блоку .content буде присвоена минимальная высота, равная разности высоты окна браузера и суммы высот шапки и футера.

CSS

 

 

Результат