/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.

Primary LanguageJavaScriptMIT LicenseMIT

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.