Skip to content

Instantly share code, notes, and snippets.

@tamouse
Last active May 14, 2017 22:38
Embed
What would you like to do?
Minimum needed for header/main/footer full height stretch
.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; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment