0

I'm working on a project in Tailwind, and I'd like my footer to have the following behaviour:

  • Be sticky to the bottom when there's empty space on the page.
  • Get pushed down when the content fills the height of the page (screenshot included)

Here's the Tailwind Play that I'm using to test this. Any help would be appreciated!

enter image description here

bugsyb
  • 5,662
  • 7
  • 31
  • 47

1 Answers1

1

Simplest solution for me would be to "flex in column" (flex flex-col min-h-screen) parent wrapper and stretch main content (flex-grow). It may require to play with parent height sometimes (depends on task)

<div class="flex flex-col min-h-screen">
  <div class="flex-grow">
    <!-- Content here -->
  </div>

  <footer class="">
    Footer
  </footer>
</div>

DEMO

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38