[css] How to stick a footer to bottom in css?

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:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

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