BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

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

А вот и сам код.
В 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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. МАКСИМ

    Интересно, но можно видео по этому поводу, так нагляднее будет, а то я не понял.

  2. Степан => автор блога Степан => автор блога

    Максим, а что именно не понятно? В примере есть полностью готовый код, где можно увидеть результат.

  3. Олег

    Здравствуйте,Степан. Замечательно. Небольшая запись в блоге, а информативно и полезно.Уверен, что много пользователей ищут материал по редакции шаблонов, а написанных простым и,главное, человеческим языком маловато. Успехов Вам. С уважением

  4. МАКСИМ

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

  5. Степан => автор блога Степан => автор блога

    Здравствуйте, Олег! Спасибо, буду и дальше стараться!

  6. Степан => автор блога Степан => автор блога

    Максим, я думаю все равно будет не понятно. Чтобы понять код, нужно начинать с основ HTML, потом CSS.

  7. Alex

    Толку от них, внутри блоков flex не работают float, clear и vertical-align

  8. Степан => автор блога Степан => автор блога

    Не совсем понял Ваш вопрос.

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573