sticky flex fluid footer
A clean solution to a sticky fluid (without fixed height) footer, without using viewport units (e.g. min-height: 100vh). No more buggy behaviors in iOS 7 Safari and IE.
CSS/HTML
html {
min-height: 100%;
height: 100%;
display: flex;
}
body {
flex-grow: 1;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
<main>
</main>
<footer>
a sticky fluid footer!
</footer>
License
MIT. Copyright 2014 Charbel Rami.