Footer at the bottom using Flex; what is it I am doing wrong?

[Braintrash]

I am trying anything, but I can’t have my footer getting in the bottom using the tutorial on CSS-Tricks.
Any help appreciated for helping me understand what I am doing wrong, cause it’s so much getting on my nerve I am thinking about going back to tables.
Thanks in advance.

body { background: #ffffff; display: flex; height: 100vh; min-height: 100vh; flex-direction: column; }
#container { margin: 0 auto; width: 960px; }
#header { background-image: url("header.png"); height: 150px; }
#nav { text-align: center; }
#content { border-bottom: 1px solid; border-top: 1px solid; padding: 10px 0px; flex: 1 0 auto; }
#footer { text-align: center; }

<div id="container">
        <header id="header">
        </header>
        <nav id="nav">
            • Text™ •
        </nav>

            {% block content %}
            {% endblock %}

        <footer id="footer">
            Text
        </footer>
    </div>

[Paulie_D]

You need to make the #container a flex-parent too…flexbox is not inherited by children.

https://codepen.io/Paulie-D/pen/LjJoMp

[Author]

Posts