Главная » Вебмастеру » Как зафиксировать «футер» (подвал) внизу страницы?

Как зафиксировать «футер» (подвал) внизу страницы?

2016-08-04 / Вр:21:45 / просмотров: 6626

Всем привет!
Я частенько сталкиваюсь с проблемкой фиксации «футера» (подвала) внизу страницы, когда верстаю сайты заказчикам.
Ведь когда не хватает информации на странице, футер может находиться посредине экрана, а то и выше. Естественно, из-за этого теряется внешний вид сайта.

В этой статье я расскажу, как все исправить и зафиксировать «футер» (подвал) внизу страницы.
Но для начала, может кто-то не сталкивался с такой проблемой, давайте на картинках просмотрим, как выглядит футер без фиксации и фиксированный футер.

Незафиксированный футер:

Как зафиксировать «футер» (подвал) внизу страницы?

Зафиксированный футер:

Как зафиксировать «футер» (подвал) внизу страницы?

А вот и сам код.
В CSS пропишите вот такие стили:

body
{
display: flex;
flex-direction: column;
}
.content
{
flex-grow: 1;
}

В HTML вот это:

<header>ШАПКА</header>
<div class="content">КОНТЕНТ</div>
<footer>ФУТЕР</footer>

Вот полностью готовый код:

<html>
<head>
<style>
body
{
display: flex;
flex-direction: column;
}
.content
{
flex-grow: 1;
}
</style>
</head>
<body>
<header>ШАПКА</header>
<div class="content">КОНТЕНТ</div>
<footer>ФУТЕР</footer>
</body>
</html>

Если есть у кого-то идеи покруче, пишите в комментариях, интересно узнать, как вы выкручиваетесь из подобной ситуации.