How to stick a footer to bottom in css?

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I\'ve tried methods including http://ryanfait.com/resources/footer-stick-to-bot

Answer 1

For modern browser, you can use flex layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)

HTML Layout:

  
My header
  
My Main page content
  
My footer

CSS:

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

Demo: https://codepen.io/datvm/pen/vPWXOQ