webworthydesign
9/24/2015 - 3:36 PM

Flex Sticky Footer

Flex Sticky Footer

regular-sticky-footer
content_copyfile_download
http://mystrd.at/modern-clean-css-sticky-footer/

CSS...

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML...

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>
flexbox-sticky-footer.css
content_copyfile_download
/*
TUTORIALS & DEMOS
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 
http://codepen.io/Rocketpilot/pen/f813cf7854371e211758f98de04a5e00
http://blog.grayghostvisuals.com/css/flexbox-sticky-footer/
http://codepen.io/devatrox/pen/wztlx
*/

#page {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

#content {
	flex: 1;
}