JSFiddle - React, Tailwind, and code Playground

by Aakash Chakravarthy

HTML

<body>
  <header>header</header>
  <section>
    <aside>Getting the footer to stick to the bottom of pages with sparse content is something just ... All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand</aside>
    <main>main</main>
  </section>

  <footer>footer</footer>
</body>

CSS

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

body {
  display: flex;
  flex-direction: column;
}

header {
  height: 75px;
}

section {
  display: flex;
}

main {
  flex: 80%;
  background-color: #ccc;
}

aside {
  background-color: red;
  flex: 20%;
  overflow: auto;
}

footer {
  height: 25px;
}