Возможен ли flexbox sticky footer без дополнительных обёрток?

Question

[SexyMonkey]

Сейчас использую вот такую конструкцию

$footer-height: 100px;
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: $footer-height;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: $footer-height;
}

Она полностью меня устраивает, кроме одного момента - необходимость указания высоты. Хотелось бы избавиться от этого недостатка, но все другие способы требуют дополнительную обёртку для контентной части, что лично мне кажется куда большим минусом, чем указание высоты. Может кто знает идеальный способ прижать футер и без указания высоты, и без дополнительных обёрток (оперируя только тегами html, body, и классом .footer), желательно на флексе.

Answer 1

[zooks]

Возможно. Оберткой будет body:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1;
}

Перед продакшном рекомендую прогнать через autoprefixer и протестировать в Safari на iOS.

Comments

[SexyMonkey]

Ключевой момент - отсутствие обёрток для контента. В вашем случае эта обёртка - main.
Использовать можно только html, body, и класс .footer

[zooks]

SexyMonkey: у вас что параграфы плавают в body? Оберток в примере нет.

[SexyMonkey]

zooks: У страниц может быть совершенно разная структура. Мне не нужна привязка метода к не относящимся к футеру элементам. Так понятней?
И да, в контексте вопроса, main - обёртка.

[zooks]

SexyMonkey: даже если вы не пользуетесь main контент все-равно обернут в какую-нибудь div-ку. В чем проблема добавить к этому тегу класс?

[SexyMonkey]

zooks: Ещё раз. Решение с обёрткой (любой, тег, класс, не важно) меня не интересует. Меня интересует решение, при котором футер будет прижат даже на голой странице.
Не разводите, пожалуйста, флуд. Исходные данные указаны в вопросе - "(оперируя только тегами html, body, и классом .footer),"

[zooks]

SexyMonkey: девушка, вы хамите и требуете решить ваши проблемы. Удачи.

[SexyMonkey]

zooks: Я от вас ничего не требую. Я прошу вас не флудить, отстаивая свой заведомо неуместный ответ, игнорирующий вводные данные.

Answer 2

[Александр Решетняк]

https://codepen.io/axelaredz/pen/zeKdWx