HTML Flex футер к низу страницы

Question

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

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  flex: 0 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="header">ALL MENU</div>
    <div class="content">HOT SEX</div>
    <footer class="footer">BOTTOM</footer>
  </div>
</body>

</html>

И все равно они слеплены вместе вверху. Только если главный див он же контейнер сразу же закрыть,то футер уезжает вниз как положено. Где ошибаюсь?подскажите.

Answer 1

Вы задаёте flex не тому элементу:

* { margin: 0; padding: 0; }
html, body { height: 100%; }

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.content { flex: 1; }

<body>
  <div class="container">
    <div class="header">ALL MENU</div>
    <div class="content">HOT SEX</div>
    <footer class="footer">BOTTOM</footer>
  </div>
</body>

БЛОГ НА HUSL

HTML Flex футер к низу страницы

Ответы (1 шт):