CODEWITHSUNDEEP
htmlcssreactjsnext.jstailwind-css
Terrybennedic7
Terrybennedic7

Reputation: 47

Why Footer is floating in tailwind css

I am using the tailwind CSS footer in my NextJS project. I am displaying fetched data. The footer is floating only when there are less data. I created a footer file in my pages and imported it into my _app.js file. I tried the absolute and fixed position. But it is not working. How do I keep my footer to the bottom?

<div className="relative mt-16 bg-gray-900">
  <div className="px-4 pt-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
    <div className="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
      <p className="text-base text-white-100">
        © Copyright 2020. All rights reserved.
      </p>
      <ul className="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
        <li>
          <Link href="/Privacy">
          <a className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                    Privacy Policy
                  </a>
          </Link>
        </li>
        <li>
          <a href="https://twitter.com/" target="_blank" rel="noreferrer noopener" className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                  Contact
                </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Views: 430

Answers (1)

juliomalves
juliomalves

Reputation: 50308

You could set a minimum height based on 100vh minus the height of the footer to the main content container.

<main class="min-h-[calc(100vh-210px)]">Main Content</main>
<footer class="h-[210px] bg-gray-900">
    <!-- Your footer content -->
</footer>

Try it on TailwindCSS playground.

Upvotes: 2

Related Questions