Submitted by manoj on 20 September 2022

Sticky footers using Flex box

Flexbox is a perfect fit for this type of problem.

we can set body min-height: 100vh ie. vh mean viewport height.

<body class="wrapper">
  <header>…</header>
  <main class="content">…</main>
  <footer>…</footer>
</body>

The CSS

.wrapper{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
}

Categories