<header>Header</header>
<section class="content">
  <p>Le contenu de cette section n'est pas suffisant pour faire basculer le bas de page. Cependant, cela est possible en utilisant Flexbox. Cette section s'étend (croît) autant qu'elle le permet, en pressant sur le bas de page. La hauteur du <code>body</code> est au moins égale à la hauteur de la fenêtre.</p>
</section>
<footer>Footer</footer>
body {
    color: #555;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

header,
footer {
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #ccc;
}

section {
    background-color: #594255;
    color: #eee;
    padding: 1em;
    margin: 1% 0;
}

.content {
    -webkit-flex-grow: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.