Question 11595 in Shopify Question posted in
The Shopify help center can be found here.

Tailwind CSS how to make footer stay at the bottom when the page size is less than VH – Shopify

I have a simple file here. I want the footer to stay at the bottom when the page size is less than the screen size.

Not sticky at the bottom always. It just has to be the last thing. If the content is less than the screen height, it has to stay at the bottom of the screen.

I tried adding min-h-screen to <main>. But it creates a lot of space and pushes the footer off the screen.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Primary Meta Tags -->
    <title>ABC Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>

<body style="background-color:#f8f7f3;">

    <header class="bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200">
        <div class="container flex flex-wrap justify-between items-center mx-auto">
            <a href="#" class="flex items-center">
                <span class="self-center text-2xl font-semibold whitespace-nowrap">ABC</span>
            </a>
        </div>
    </header>

    <main>

        <div class="container mx-auto px-5 md:max-w-screen-lg mt-20 md:mt-36">

            <div class="p-6 text-center mb-10 md:mb-20">
                <h1 class="text-3xl">Blog - Articles, Insights, Tips and Tools</h1>
            </div>

            <a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
                <div class="px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2">
                    <h2 class="text-xl font-medium">Lorem ipsum dolor sit amet.</h2>
                    <p class="py-3 md:py-0 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
                    </p>
                    <div class="flex space-x-2 text-xs">
                        <p class="text-gray-500">Oct 13, 2022</p>
                        <p>|</p>
                        <p>John</p>
                    </div>
                </div>
            </a>
        </div>
    </main>

    <footer class="w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20">
        <span class="text-sm sm:text-center">© 2022 <a href="#" class="hover:underline">ABC</a>.
            All Rights Reserved.
        </span>
    </footer>

</body>

</html>
Tags:

2

Answers


  1. 0

    You should make the body a flex container (column-direction) and the footer will be always the last to appear.
    Check this link, you will find a well explained answer:
    here

    Login or Signup to reply.
  2. 0

    You can wrap your header, main and footer inside a div with display: grid and use the pancake stack

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Primary Meta Tags -->
    <title>ABC Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>

<body style="background-color:#f8f7f3;">
 <div class="grid grid-rows-[auto-1fr-auto] min-h-screen">
    <header class="bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200">
        <div class="container flex flex-wrap justify-between items-center mx-auto">
            <a href="#" class="flex items-center">
                <span class="self-center text-2xl font-semibold whitespace-nowrap">ABC</span>
            </a>
        </div>
    </header>

    <main>

        <div class="container mx-auto px-5 md:max-w-screen-lg mt-20 md:mt-36">

            <div class="p-6 text-center mb-10 md:mb-20">
                <h1 class="text-3xl">Blog - Articles, Insights, Tips and Tools</h1>
            </div>

            <a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
                <div class="px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2">
                    <h2 class="text-xl font-medium">Lorem ipsum dolor sit amet.</h2>
                    <p class="py-3 md:py-0 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
                    </p>
                    <div class="flex space-x-2 text-xs">
                        <p class="text-gray-500">Oct 13, 2022</p>
                        <p>|</p>
                        <p>John</p>
                    </div>
                </div>
            </a>
        </div>
    </main>

    <footer class="w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20">
        <span class="text-sm sm:text-center">© 2022 <a href="#" class="hover:underline">ABC</a>.
            All Rights Reserved.
        </span>
    </footer>
</div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search