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

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 >
        <div >
            <a href="#" >
                <span >ABC</span>
            </a>
        </div>
    </header>

    <main>

        <div >

            <div >
                <h1 >Blog - Articles, Insights, Tips and Tools</h1>
            </div>

            <a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
                <div >
                    <h2 >Lorem ipsum dolor sit amet.</h2>
                    <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
                    </p>
                    <div >
                        <p >Oct 13, 2022</p>
                        <p>|</p>
                        <p>John</p>
                    </div>
                </div>
            </a>
        </div>
    </main>

    <footer >
        <span >© 2022 <a href="#" >ABC</a>.
            All Rights Reserved.
        </span>
    </footer>

</body>

</html>

CodePudding user response：

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

CodePudding user response：

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 >
    <header >
        <div >
            <a href="#" >
                <span >ABC</span>
            </a>
        </div>
    </header>

    <main>

        <div >

            <div >
                <h1 >Blog - Articles, Insights, Tips and Tools</h1>
            </div>

            <a href="#/shopify-dawn-theme-hidedisable-add-to-cart-popup">
                <div >
                    <h2 >Lorem ipsum dolor sit amet.</h2>
                    <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.
                    </p>
                    <div >
                        <p >Oct 13, 2022</p>
                        <p>|</p>
                        <p>John</p>
                    </div>
                </div>
            </a>
        </div>
    </main>

    <footer >
        <span >© 2022 <a href="#" >ABC</a>.
            All Rights Reserved.
        </span>
    </footer>
</div>
</body>

</html>