How you can make footer all the time at backside of scroll with Tailwind css

I’m new to tailwind and I’m making an attempt to make use of a footer element. I might adore it all the time to be on the backside of the web page but when you wish to have to scroll, the footer does not seem till you succeed in the ground of the scroll. I’ve the scrolling section down, however on my homepage when there isn’t wish to scroll down, the footer is in the midst of the web page. Any assist please!

<div className=”inset-x-0 bottom-0″>
<footer className=”bottom-0 w-screen p-4 bg-white rounded-lg shadow md:items-center md:justify-between darkish:bg-gray-800 w-100″>
<span className=”text-sm text-gray-500 sm:text-center darkish:text-gray-400″>
© 2023{‘ ‘}
<Hyperlink
href=”https://ethglobal.com/”
className=”hover:underline”
goal=”_blank”
>
ETHGlobal
</Hyperlink>
. All Rights Reserved.
</span>
<ul className=”flex flex-wrap items-center mt-3 sm:mt-0″>
<li>
<Hyperlink
href=”https://ethglobal.com/about”
className=”mr-4 text-sm text-gray-500 hover:underline md:mr-6 darkish:text-gray-400″
goal=”_blank”
>
About
</Hyperlink>
</li>
<li>
<Hyperlink
href=”https://ethglobal.com/rules”
className=”mr-4 text-sm text-gray-500 hover:underline md:mr-6 darkish:text-gray-400″
goal=”_blank”
>
Laws & Code of Behavior
</Hyperlink>
</li>
<li>
<Hyperlink
href=”https://ethglobal.com/privacy”
className=”mr-4 text-sm text-gray-500 hover:underline md:mr-6 darkish:text-gray-400″
goal=”_blank”
>
Privateness Coverage
</Hyperlink>
</li>
</ul>
</footer>
</div>

https://preview.redd.it/ifcgl4srysna1.png?width=2914&format=png&auto=webp&v=enabled&s=3a7dfff21df0041e3f6f0d8f36bf18eaa9b4ea15

SOLUTION:
I wrapped my content material in a chief tag with h-screen className and flex. I put the header and footer elements out of doors of the principle tag.

View Reddit through KateGJohnson – View Supply