Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Как прижать футер к низу страницы? Выбиваем лучший вариант из множества рассмотренных

Доброго времени суток, гики верстки и мои верные подписчики. Посмотрев на многочисленные вопросы и проблемы с реализацией одного элемента, я решил написать статью, которая должна вам помочь избежать той же участи. А этим непокорным является «подвал» сайтов, который вечно у начинающих разработчиков вызывает вопрос: «Как же прижать футер к низу страницы?».

Поэтому в сегодняшней публикации вы найдете описание нескольких способов реализации данного механизма при помощи не только привычных вам html5 и css, а еще скриптовых языков и фреймворков таких, как bootstrap. Не буду вас больше томить, приступаем к разбору полетов!

Что называют «подвалом» сайта?

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

В html5 появился отдельный тег footer>, который отвечает за данный параметр. С его помощью легче не только разобрать код. Он упрощает работу поисковых роботов и программ.

Подвал моего блога

Создание футера при помощи средств css

Для начала я расскажу о более простых способах реализации прижатого «подвала» к низу страницы. К ним относятся примеры, созданные при помощи одних только средств html-разметки и css стилей.

Первый вариант

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
<style>
body {
  height: 100%;
  margin: 0;
  background-image: url(http://shugaev.su/wp-content/uploads/2015/07/6.jpg);
  background-size:cover;
  text-align: center;
  background-attachment: fixed;
}
/*Благодаря первым двум строкам «подвал прижимается к нижнему краю веб-странички»*/
.all{
  min-height: 100%;
  position: relative;
  width:76%;
  border: 3px double #0CDCDC;
  margin-left: 12%;
  background-color: rgba(73, 129, 184, .84);
}
.content {
  padding-bottom: 90px;
}
header{
 color: #FF0010;
 border-bottom: 2px solid;
}
 footer {
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: rgba(249,254,254,.52);
  padding: 6px;
  border-top: 1px solid #0CDCDC;
}
img {
 margin: 7px;
 box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
   <header>
    <h1>Акционная распродажа к концу лета!</h1>
  </header>
  <div class="content">
    <h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
    <p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
    <p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
  </div>
  <footer>
    Сайт принадлежит компании "*****", которая основана в 1997 году.
  </footer>
</div>
</body>
</html>

Второй вариант с параметрами Flexbox

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

Сама по себе flex-верстка – это гибкое расположение всех объектов на страницах веб-ресурсов для их оптимального использования доступного пространства.

Огромным преимуществом такой технологии является возможность расположение объектов не только по направлению сверху вниз, а еще и слева направо, снизу вверх и справа налево. За это отвечает flex-direction.

Примерный пример

Стоит еще сказать и за flex. Это универсальный параметр, который включает в себя:


  • flex-grow – отвечает за расширение элементов-наследников,
  • flex-shrink – указывает сжатие дочерних объектов,
  • flex-basis – определяет занимаемое место конкретного элемента перед последующим размещением всех объектов страницы.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<style>
body {
  height: 100%;
  margin: 0;
  background-image: url(http://shugaev.su/wp-content/uploads/2015/07/6.jpg);
  background-size:cover;
  text-align: center;
  background-attachment: fixed;
}
.all{
  display: flex;
  flex-direction: column;
  width:76%;
  border: 4px double #0CDCDC;
  margin-left: 12%;
  background-color: rgba(73, 129, 184, .84);
}
.content {
  flex: 1 0 auto;
}
header{
 color: #FF0010;
 border-bottom: 2px solid;
}
 footer {
  flex: 0 0 auto;
  background: rgba(249,254,254,.52);
  padding: 27px 6px;
  border-top: 1px solid #0CDCDC;
}
img {
 margin: 7px;
 box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
   <header>
    <h1>Акционная распродажа к концу лета!</h1>
  </header>
  <div class="content">
    <h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
    <p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
    <p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
  </div>
  <footer>
    Сайт принадлежит компании "*****", которая основана в 1996 году.
  </footer>
</div>
</body>
</html>

Третий вариант с табличными преобразованиями

Третий пример отличается от предыдущих тем, что высота «подвала» не важна, а основной блок «all» превращается в некое подобие таблицы. Такой эффект достигается за счет свойств

display: table и table-row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<style>
body {
  height: 100%;
  margin: 0;
  background-image: url(http://shugaev.su/wp-content/uploads/2015/07/6.jpg);
  background-size:cover;
  text-align: center;
  background-attachment: fixed;
}
.all{
  display: table;
  height: 100%;
  width:76%;
  border: 4px double #0CDCDC;
  margin-left: 12%;
  background-color: rgba(73, 129, 184, .84);
}
.content {
  display: table-row;
  height: 100%;
}
header{
 color: #FF0010;
 border-bottom: 2px solid;
}
 footer { 
  background: rgba(249,254,254,.52);
  margin-top: 13px;
  padding: 27px 6px;
  border-top: 1px solid #0CDCDC;
}
img {
 margin: 7px;
 box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
   <header>
    <h1>Акционная распродажа к концу лета!</h1>
  </header>
  <div class="content">
    <h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
    <p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
    <p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
  </div>
  <footer>
    Сайт принадлежит компании "*****", которая основана в 1996 году.
  </footer>
</div>
</body>
</html>

Четвертый вариант с уловкой

Иногда используют и способ с отрицательным внешним отступом. Для этого Основной слой и блок с контентом занимают все 100% вкладки, а footer-у задают фиксированное значение высоты и после margin-top: — эта_высота. Но я такой способ не приветствую. Он очень корявый и однозначно проигрывает всем перечисленным выше.

Данные варианты решений можно применять на любых движках, в том числе и joomla, и для любых веб-сервисов.

Немного хитростей от JavaScript и jQuery

Если же по каким-то причинам прошлые примеры вас не спасли, то на помощь спешат js и jQuery. Для прошлых примеров вместо тех добавленных свойств можно вписать простенькую скриптовую функцию. Она вытаскивает значение высоты футера и шапки, после отнимает их от размера всего окна.

Таким образом получается оптимальное значение высоты для веб-контента. Как видите, очень простенькая функция, но действенная.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<style>
body {
  height: 100%;
  margin: 0;
  background-image: url(http://shugaev.su/wp-content/uploads/2015/07/6.jpg);
  background-size:cover;
  text-align: center;
  background-attachment: fixed;
}
.all{
  display: table;
  height: 100%;
  width:76%;
  border: 4px double #0CDCDC;
  margin-left: 12%;
  background-color: rgba(73, 129, 184, .84);
}
.content {
  display: table-row;
  height: 100%;
}
header{
 color: #FF0010;
 border-bottom: 2px solid;
}
 footer { 
  background: rgba(249,254,254,.52);
  margin-top: 13px;
  padding: 27px 6px;
  border-top: 1px solid #0CDCDC;
}
img {
 margin: 7px;
 box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
   <header>
    <h1>Акционная распродажа к концу лета!</h1>
  </header>
  <div class="content">
    <h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
    <p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
    <p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
  </div>
  <footer>
    Сайт принадлежит компании "*****", которая основана в 1996 году.
  </footer>
</div>
</body>
</html>

Теперь вы знаете все популярные способы прижатия футера к нижнему краю веб-страниц.

Надеюсь, вам понравилась публикация. А если это так, то подписывайтесь на обновления моего блога и делитесь полученными знаниями с коллегами и друзьями. До новых встреч! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 57 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: