Footer sticky with TailwindCSS

Published in HTML/CSS, TailwindCSS on

By default we usually have this base structure

<html>
  <body>
    <div id="app">
      <header>Header</header>
      <main>Main content</main>
      <footer>Footer</footer>
    </div>
  </body>
</html>

Set some CSS params

  • <html>,<body> to height 100%,
  • <div id="app"> to min-height 100%, display flex, direction flex-column
<html class="h-full">
  <body class="h-full">
    <div id="app" class="min-h-full flex flex-col">
      <header>Header</header>
      <main>Main content</main>
      <footer>Footer</footer>
    </div>
  </body>
</html>

When you have more than one wrap like in my example (div#app), for example <div class="wrap1"><div class="wrap2"><div id="app"> you must set height 100% for each wrapp excluding the last wrapper - last wrap alway must be with min-height 100%. It can be look like this <div class="wrap1 h-full"><div class="wrap2 h-full"><div id="app" class="min-h-full ...">

Now do trick: <footer> margin-top: auto

<html class="h-full">
  <body class="h-full">
    <div id="app" class="min-h-full flex flex-col">
      <header>Header</header>
      <main>Main content</main>
      <footer class="mt-auto">Footer</footer>
    </div>
  </body>
</html>

Footer can behave at different heights, and it always will be sticky to the bottom of the page. Below you can see base example (I added some other styles for detecting sections like - bg-blue-...)

See the Pen TailwindCSS sticky footer (v.1) by Alexander Zidyganov (@csscoder) on CodePen. 

P.S. This way works for many Web Sites(web designs)
I know about 100vh - but it does not work correctly in the mobile device when the browser top-bar is showing - and fixing it, we need to use the trick with JavaScript. So I use this way.