A Pen by Tamara Temple on CodePen.
Based on an article at CSS-Tricks Boxes That Fill Height (Or More) (and Don’t Squish).
There were a couple of missing pieces in the article:
html and body need to have height: 100%.flex-container needs to have min-height: 100%| .flex-container | |
| %header.page-header | |
| %h1 | |
| %a{href:"#"} Brand | |
| %main#content.container | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quasi aut recusandae, nulla magni quaerat. Ratione sequi, tempora voluptates perspiciatis cum, officia vero excepturi pariatur voluptatum? Delectus mollitia, totam sed. | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quasi aut recusandae, nulla magni quaerat. Ratione sequi, tempora voluptates perspiciatis cum, officia vero excepturi pariatur voluptatum? Delectus mollitia, totam sed. | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quasi aut recusandae, nulla magni quaerat. Ratione sequi, tempora voluptates perspiciatis cum, officia vero excepturi pariatur voluptatum? Delectus mollitia, totam sed. | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quasi aut recusandae, nulla magni quaerat. Ratione sequi, tempora voluptates perspiciatis cum, officia vero excepturi pariatur voluptatum? Delectus mollitia, totam sed. | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quasi aut recusandae, nulla magni quaerat. Ratione sequi, tempora voluptates perspiciatis cum, officia vero excepturi pariatur voluptatum? Delectus mollitia, totam sed. | |
| %footer.page-footer | |
| Copyright © 2017 Pontiki Software Crafts. CC License. |
| * { box-sizing: border-box; } | |
| /* for full-height stretch */ | |
| html, body { height: 100%; } /* this wasn't in chris's post, but is necessary */ | |
| .flex-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100%; /* this also wasn't in chris's post, but is hugely necessary, too */ | |
| > * { | |
| flex: 1; | |
| } | |
| } | |
| /* for header / main / footer layout */ | |
| $page_boundary_height: 70px; | |
| .page-boundary { | |
| max-height: $page_boundary_height; | |
| background-color: rebeccapurple; | |
| color: white; | |
| padding: 20px; | |
| a, a:visited, a:active {color: white;} | |
| a:hover {color: #ccc;} | |
| h1 {font-size: 2em; font-family: sans-serif;} | |
| } | |
| .page-header, .page-footer { @extend .page-boundary; } | |
| .container { | |
| padding: 0 2em; | |
| p { margin-bottom: 1em; } | |
| } |