I am new to the tailwind css. I was making my new webpage where I am putting a footer. But the problem is the footer position is relative to the content. That is, if the content is less than the page size, it goes up. I tried googling the problem and found some solutions and none of them worked.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div >
<!-- navbar -->
<div >
<div x-data="{ open: false }" >
<div >
<a href="#" >Sachchidanand Prasad</a>
<button @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" >
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav : >
<a href="index.html">Home</a>
<a href="research.html">Research</a>
<a href="cv.html">CV</a>
</nav>
</div>
</div>
<!-- footer -->
<footer >
<div >
<div >
<div >
<h2 >
Useful Links
</h2>
<ul >
<li>
<a href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a>
</li>
<li>
<a href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a>
</li>
<li>
<a href="https://mtts.org.in/" target="_blank">MTTS</a>
</li>
<li>
<a href="https://www.atmschools.org/" target="_blank">ATM School</a>
</li>
</ul>
</div>
<div >
<h2 >
Useful Links
</h2>
<ul >
<li>
<a href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a>
</li>
<li>
<a >About Us</a>
</li>
<li>
<a >Blogs</a>
</li>
<li>
<a >Contact Us</a>
</li>
</ul>
</div>
<div >
<h2 >
Social Networks
</h2>
<ul >
<li>
<a href="">Facebook</a>
</li>
<li>
<a href="">Twitter</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Github</a>
</li>
</ul>
</div>
</div>
</div>
<div >
<p >
All rights reserved by @ <a href="index.html">Sachchidanand</a> 2022
</p>
</div>
</footer>
</div>The output:
CodePudding user response：
You can set a mt-auto to the footer. See Full Page:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div >
<!-- navbar -->
<div >
<div x-data="{ open: false }" >
<div >
<a href="#" >Sachchidanand Prasad</a>
<button @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" >
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav : >
<a href="index.html">Home</a>
<a href="research.html">Research</a>
<a href="cv.html">CV</a>
</nav>
</div>
</div>
<!-- footer -->
<footer >
<div >
<div >
<div >
<h2 >
Useful Links
</h2>
<ul >
<li>
<a href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a>
</li>
<li>
<a href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a>
</li>
<li>
<a href="https://mtts.org.in/" target="_blank">MTTS</a>
</li>
<li>
<a href="https://www.atmschools.org/" target="_blank">ATM School</a>
</li>
</ul>
</div>
<div >
<h2 >
Useful Links
</h2>
<ul >
<li>
<a href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a>
</li>
<li>
<a >About Us</a>
</li>
<li>
<a >Blogs</a>
</li>
<li>
<a >Contact Us</a>
</li>
</ul>
</div>
<div >
<h2 >
Social Networks
</h2>
<ul >
<li>
<a href="">Facebook</a>
</li>
<li>
<a href="">Twitter</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Github</a>
</li>
</ul>
</div>
</div>
</div>
<div >
<p >
All rights reserved by @ <a href="index.html">Sachchidanand</a> 2022
</p>
</div>
</footer>
</div>