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

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

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

Подскажите самый простой способ прижать 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

*,
*: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

*,
*: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

<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

*,
*: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

*,
*: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 **[ТС]**

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

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

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 38
		1
	Прижать footer к низу CSS 17.01.2019, 17:05. Показов 1834. Ответов 15 Метки нет (Все метки) Подскажите самый простой способ прижать footer к низу на чистом CSS без позиционирования 0

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

@Djalal777 0 / 0 / 0 Регистрация: 22.12.2018 Сообщений: 26
	17.01.2019, 20:14	3
	Сообщение от Qwerty_Wasd к низу страницы или вьюпорта? Qwerty_Wasd, Мне кажется к низу вьюпорта. 0

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

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

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

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

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

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

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

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

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

Решение