Tailwindcss:底部的固定/粘性页脚 [英] Tailwindcss: fixed/sticky footer on the bottom
本文介绍了Tailwindcss:底部的固定/粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用了 tailwindCSS 并遇到了制作页脚的问题.
base.html
{% 包含 "partials/nav.html" %}{% 块内容 %}{% 结束块 %}{% 包含 "partials/footer.html" %}footer.html
我尝试了静态、绝对、固定、相对...但.固定覆盖内容块和相对使页脚向上.或 .mb-0、.bottom-0 不起作用.
是否可以将页脚固定在底部?
解决方案
<header class="h-10 bg-red-500">Header</header><main class="mb-auto h-10 bg-green-500">内容</main><footer class="h-10 bg-blue-500">页脚</footer>Class justify-between 不是必需的，但我会离开他(对于其他情况).
所以，使用 h-screen 和 mb-auto 类.
你会得到这个用户界面:
I use tailwindCSS and confront a problem with make footer.
base.html
<body>
{% include "partials/nav.html" %}
{% block content %}
{% endblock %}
{% include "partials/footer.html" %}
</body>
footer.html
<footer class="w-full h-64 bg-gray-900 static bottom-0">
{% load static %}
<img src="{% static "images/logo_white.png" %}" width="70px"> <p class="text-white"> ©~~~~~~</p>
</footer>
i tried static,absolute,fixed,relative... but .fixed cover the content block and relative make footer going upside. or .mb-0, .bottom-0 doesn't work.
is it possible make footer fixed on the bottom?
解决方案
<div class="flex flex-col h-screen justify-between">
<header class="h-10 bg-red-500">Header</header>
<main class="mb-auto h-10 bg-green-500">Content</main>
<footer class="h-10 bg-blue-500">Footer</footer>
</div>
Class justify-between is not required, but I would leave him (for other case).
So, play with h-screen and mb-auto classes.
And you get this UI:
这篇关于Tailwindcss:底部的固定/粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
