#cssref Flexbox (16) | Embed - Codrops Playground

<header>Header</header>
<section class="content">
  <p>The content in this section is not enough to push the footer down. However, this is possible using Flexbox. This section expands (grows) as much as it can, pushing the footer down as it does. The height of the <code>body</code> is at least as much as the height of the viewport.</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;
}