mrtoxas

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Прижать footer к нижнему краю страницы. Подборка вариантов.

Запись от mrtoxas размещена 27.10.2016 в 22:52

Показов 17736 Комментарии 4

Метки css, footer, html, прижать футер

Вариант 1. Псевдоэлементы.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html, body {
      height: 100%;
      margin:0;
    }
    .wrapper {
      min-height: 100%;
      /* margin-bottom = высота футера */
      margin-bottom: -50px; 
    }
    .wrapper:after {
      content: "";
      display: block;
    }
    .footer, .wrapper:after {
      /* высота футера */
      height: 50px; 
    }
    .footer {
      background: tomato;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>
<footer class="footer">
  Footer
</footer>
</body>
</html>

Вариант 2. Отрицательный margin и доп. блок.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .wrapper {
      min-height: 100%;
      /* margin-bottom = -высота футера */
      margin-bottom: -50px;
    }
    .footer, .indent {
      /* высота футера */
      height: 50px;
    }
    .footer {
      background-color: tomato;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <div class="indent"></div>
</div>
<footer class="footer">
  Footer
</footer>
</body>
</html>

Вариант 3. Padding и отрицательный margin.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .wrapper {
      min-height: 100%;
    }
    .content {
      /* padding-bottom = высота футера */
      padding-bottom: 50px;
    }
    .footer {
      /* высота футера */
      height: 50px;
      margin-top: -50px;
      background-color:tomato;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>
<footer class="footer">
  Footer
</footer>
</body>
</html>

Вариант 4. Calc.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,body {
      height:100%;
      margin:0;
    }
    .content {
      /* 100vh - высота футера */
      min-height: calc(100vh - 50px);
    }
    .footer {
        /* Высота футера */
      height: 50px;
      background: tomato;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <footer class="footer">
    Footer
  </footer>
</div>
</body>
</html>

Вариант 5. Flexbox.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,body {
      height: 100%;
      margin:0;
    }
    .wrapper {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content {
      flex: 1;
    }
    .footer{
      background-color:tomato;
      /* высота футера */
      height:50px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <footer class="footer">
    Footer
  </footer>
</div>
</body>
</html>

Вариант 6. Позиционирование.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,body { 
      height: 100%; 
      margin:0;
    }
    .wrapper {
        min-height:100%; 
        position:relative; 
    }
    .content{
      /*padding-bottom = высота футера */
      padding-bottom: 50px;
    }
    .footer { 
        position:absolute; 
        left:0; 
        right:0; 
        bottom:0; 
        /* высота футера */
        height:50px; 
        background-color:tomato;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <footer class="footer">
    Footer
  </footer>
</div>
</body>
</html>

Вариант 7. Блочная таблица.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,body {
      height: 100%;
      margin: 0;
    }
    .wrapper {
      display: table;
      height: 100%;
      width: 100%;
    }
    .content {
      display: table-row;
      height: 100%;
    }
    .footer {
      background-color: tomato;
      /* высота футера */
      height:50px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    Content
  </div>
  <div class="footer">
    Footer
  </div>
</div>
</body>
</html>

Вариант 8. Таблица.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,body {
      height: 100%;
    }
    .wrapper {
      width: 100%;
      height: 100%;
      border-collapse: collapse;
    }
    .content{
      vertical-align:top;
    }
    .footer {
      /* высота футера */
      height: 50px;
      background-color: tomato;
    }
  </style>
</head>
<body>
<table class="wrapper">
  <tr>
    <td class="content">
      Content
    </td>
  </tr>
  <tr>
    <td class="footer">Footer</td>
  </tr>
</table>
</body>
</html>

Вариант 9. Grid.

Кликните здесь для просмотра всего текста

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html {
      height: 100%;
      margin: 0;
    }
    body {
      min-height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
      margin: 0;
    }
    .footer {
      grid-row-start: 2;
      grid-row-end: 3;
      background: tomato;
    }
  </style>
</head>
<body>
<div class="content">
  Content
</div>
<footer class="footer">
  Footer
</footer>
</body>
</html>

Метки css, footer, html, прижать футер

Размещено в Верстка

Главная страница Спойлер на js »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 4

Комментарии

	Отличная подборка и весьма полезная! В вариантах с позиционированием и таблицей обнули margin у html и body... И раз уж есть таблица можно и фреймы добавить, тогда будет совсем полный комплект...
	Запись от Fedor92 размещена 28.10.2016 в 11:24

	Fedor92, какой ты внимательный
	Запись от mrtoxas размещена 28.10.2016 в 11:43

	Отличная подборка. Огромное.
	Запись от xandr555 размещена 22.03.2020 в 14:59

	Спасибо
	Запись от mr_dramm размещена 30.11.2021 в 22:02

mrtoxas

Регистрация 12.07.2015
Адрес Украина
Сообщений 6,672
Записей в блоге 4

Новые блоги и статьи Все статьи Все блоги /
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))
Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .	[EasyBuilder Pro] Памятка по разработке для панелей Weintek ФедосеевПавел 26.08.2026 Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .	Модель по догадкам anaschu 25.08.2026 Прошло две недели. Я уже рассказывал, как разговаривал с сотрудниками у сортировки и как понял, что главная ветка — не про приёмку, а про отбор. Но тогда я думал, что понял механику. На этой неделе я. . .

Наверх

Сообщение форума

Отменить изменения