Прижать footer к низу CSS

@Тарасян · Регистрация: 05.01.2019

Студворк — интернет-сервис помощи студентам

Подскажите самый простой способ прижать footer к низу на чистом CSS без позиционирования

Qwerty_Wasd · 17.01.2019, 18:50

Тарасян, к низу страницы или вьюпорта?

@Djalal777 · 17.01.2019, 20:14

Сообщение от Qwerty_Wasd

к низу страницы или вьюпорта?

Qwerty_Wasd, Мне кажется к низу вьюпорта.

Qwerty_Wasd · 17.01.2019, 20:44

Djalal777,

Сообщение от Djalal777

Мне кажется

тааак

Вот к низу страницы - https://codepen.io/qwerty_wasd/pen/yKXMKb

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

HTML5
1
2
3
<div class="header">Шапка</div>
<div class="content">Контент</div>
<div class="footer">Подвал</div>

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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body,
div {
  width: 100%;
  font-weight: bolder;
}
 
.header {
  height: 100px;
  background: red;
}
 
.content {
  min-height: calc(100vh - 200px);
  background: green;
}
 
.footer {
  height: 100px;
  background: blue;
}

А вот к низу вьюпорта - https://codepen.io/qwerty_wasd/pen/vvwaZG

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

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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body,
div {
  width: 100%;
}
html,
body,
div {
  width:100%;
  font-weight:bolder;
}
.header {
  height:100px;
  background:red;
}
.content {
  min-height:100vh;
  background:green;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: blue;
}

@Тарасян · 17.01.2019, 21:40 **[ТС]**

я про стандартную проблемку, если контента мало то footer маячит посередине страницы

Добавлено через 19 секунд
видимой части страницы

Qwerty_Wasd · 17.01.2019, 21:49

Тарасян, тогда вам нужен первый вариант

Вот еще вариант на флекс - https://codepen.io/qwerty_wasd/pen/MZdPKb

HTML5
1
2
3
4
5
<div class="module-wrapper">
  <div class="item-header"></div>
  <div class="item-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea consequatur illum laboriosam quo itaque, voluptatibus hic commodi, sint doloremque illo voluptates minima necessitatibus veniam eveniet assumenda asperiores. Cumque, maxime repellendus?Consequatur accusantium veritatis, harum praesentium odit quos nulla ex magni fuga aliquid amet, assumenda repellat reiciendis nostrum mollitia tempora maxime a! Voluptatem voluptate enim nesciunt reprehenderit autem harum rem error.Dignissimos cumque expedita maxime soluta, facilis voluptas quis ducimus et nobis alias perferendis animi repudiandae eius nihil error officiis qui libero hic impedit aperiam sapiente doloribus voluptatem? Ullam, fugiat maiores!Consectetur harum perferendis sequi dolores a eos, dicta vero enim debitis labore nulla quibusdam porro doloribus beatae repudiandae voluptatum natus! Voluptatum, unde! Aliquid explicabo tempora commodi nisi est doloremque rerum!Sequi saepe aliquid qui enim. Earum consectetur odio esse tempora. Perspiciatis, labore! Dignissimos, rem. Earum necessitatibus, asperiores eligendi obcaecati illo molestias? Voluptatibus, iure maiores possimus dolore quis aliquam facilis cupiditate.</div>
  <div class="item-footer"></div>
</div>

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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.module-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.module-wrapper .item-header {
  height: 50px;
  background: red;
}
.module-wrapper .item-content {
  flex-grow: 1;
  background: green;
}
.module-wrapper .item-footer {
  height: 50px;
  background: blue;
}

@Тарасян · 18.01.2019, 13:29 **[ТС]**

а если нет обёртки для всего содержимого "wrapper" и ещё, если всё обернуть в <div class="wrapper" это никак не повлияет на отображение содержимого?

Qwerty_Wasd · 18.01.2019, 13:31

Тарасян, тогда оберткой стал body.. стили ему отдайте

@Тарасян · 18.01.2019, 13:38 **[ТС]**

думал об этом, merci

Qwerty_Wasd · 18.01.2019, 13:48

Тарасян, not at'll, удачи

@Тарасян · 18.01.2019, 14:20 **[ТС]**

не прижимает

HTML5
1
2
3
<header class="header"></header>
<main class="content"></main>
<footer class="footer"></footer>

CSS
1
2
3
html, body {height: 100%;}
.content {min-height: calc(100%-100px);}
.footer {width: 100%; height: 100px;}

Qwerty_Wasd · 18.01.2019, 14:24

Тарасян, Что у Вас не прижимает - https://jsfiddle.net/Qwerty_Wasd/7guyn5t1/ ????

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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body,
div {
  width:100%;
}
.header {
  height:100px;
  background:red;
}
.content {
  min-height:calc(100vh - 200px);
  background:green;
}
.footer{
  height:100px;
  background:blue;
}

@Тарасян · 18.01.2019, 14:29 **[ТС]**

footer

@gogolik · 18.01.2019, 14:43

Тарасян, минус пробелами должен быть обособлен в calc.

Qwerty_Wasd · 18.01.2019, 14:46

Не по теме:

gogolik, это Вы хорошо подметили, я на код ТС даже посмотрел.

@Тарасян · 18.01.2019, 14:53 **[ТС]**

))) ох уж эти детали

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 09.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47

	Прижать footer к низу CSS 17.01.2019, 17:05. Показов 2076. Ответов 15 Метки нет (Все метки) Подскажите самый простой способ прижать footer к низу на чистом CSS без позиционирования 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	17.01.2019, 18:50
	Тарасян, к низу страницы или вьюпорта? 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	17.01.2019, 21:40 [ТС]
	я про стандартную проблемку, если контента мало то footer маячит посередине страницы Добавлено через 19 секунд видимой части страницы 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	18.01.2019, 13:29 [ТС]
	а если нет обёртки для всего содержимого "wrapper" и ещё, если всё обернуть в <div class="wrapper" это никак не повлияет на отображение содержимого? 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.01.2019, 13:31
	Тарасян, тогда оберткой стал body.. стили ему отдайте 1

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	18.01.2019, 13:38 [ТС]
	думал об этом, merci 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.01.2019, 13:48
	Тарасян, not at'll, удачи 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	18.01.2019, 14:29 [ТС]
	footer 0

@gogolik Супер-модератор 3957 / 2073 / 831 Регистрация: 13.03.2010 Сообщений: 6,833
	18.01.2019, 14:43
	Сообщение было отмечено Тарасян как решение Решение Тарасян, минус пробелами должен быть обособлен в `calc`. 2

Qwerty_Wasd
	18.01.2019, 14:46
	Не по теме: gogolik, это Вы хорошо подметили, я на код ТС даже посмотрел. 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	18.01.2019, 14:53 [ТС]
	))) ох уж эти детали 0

Прижать footer к низу CSS

Решение