I want to achieve a sticky footer so the footer is at the bottom of the window even if the page content is short, but will be pushed down on pages with longer content (like this).
I am using YUI purecss on the page, but the pure-g div in the header does not expand to the full width like it normally does.
HTML
<body class="site">
<div class="header">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4">One quarter</div>
<div class="pure-u-1 pure-u-md-3-4">Three quarters</div>
</div>
</div>
<div class="main">
<div class="pure-g">
<div class="pure-u-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
</div>
</div>
<div class="footer">
<div class="pure-g">
<div class="pure-u-1" style="background-color:#302c2d; color:white;">Footer</div>
</div>
</div>
</body>
CSS
.site {
display: -webkit-flex;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
flex-direction: column;
margin:0;
}
.main {
-webkit-flex: 1;
flex: 1;
margin:0px auto;
max-width:600px;
}
.header {
max-width:600px;
margin: 0 auto;
}
Here is the jsfiddle
Is there some additional css I need to add or a better way to achieve the sticky footer while still being able to use purecss modules?
The header div just needed a width set to 100% to stop it collapsing.
So YUI purecss works no problem inside the sticky footer template.