<div class="page">
<div class="page__content">
<h1>Content</h1>
</div>
<div class="page__header">
<h3>Header</h3>
</div>
<div class="page__footer">
<h3>Footer</h3>
</div>
</div>
html, body, .page {
height: 100%;
}
.page {
display: flex;
flex-direction: column;
&__content {
flex-grow: 1;
background-color: #ccc;
}
&__header {
order: -1;
}
&__footer, &__header {
background-color: #333;
color: #fff;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.