How to make a sticky footer using flexbox in IE11?

by

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

More Related Contents:

  1. flex property not working in IE
  2. Absolutely positioned flex item is not removed from the normal flow in IE11
  3. Flexbox on IE11: image stretched for no reason?
  4. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  5. How to place elements like this
  6. Flexbox code working on all browsers except Safari. Why?
  7. How to center a flex container but left-align flex items
  8. Left column and stacked right column using flexbox CSS [duplicate]
  9. Last margin / padding collapsing in flexbox / grid layout
  10. CSS Grid Layout not working in IE11 even with prefixes
  11. Equal width flex items even after they wrap
  12. How to center elements on the last row in CSS Grid?
  13. Change div order with CSS depending on device-width
  14. input / button elements not shrinking in a flex container
  15. How can I combine flexbox and vertical scroll in a full-height app?
  16. Why isn’t object-fit working in flexbox?
  17. text-overflow is not working when using display:flex
  18. Removing margin from flex items when they wrap
  19. Calculator keypad layout with flexbox
  20. Flexbox alternative for IE9
  21. Prevent flex items from stretching
  22. Flex items not respecting margins and box-sizing: border-box
  23. Flex item should align left, not center, when it wraps
  24. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  25. Prevent a child element from overflowing its parent in flexbox [duplicate]
  26. Why isn’t position:sticky with left:0 working inside a scrollable container?
  27. Chrome does not expand flex parent according to children’s content [duplicate]
  28. Flexbox with fixed header and footer and scrollable content
  29. What are the default values for justify-content & align content?
  30. Sizing flex items on the last row

Leave a Comment