Tailwindcss:底部的固定/粘性页脚

本文介绍了Tailwindcss:底部的固定/粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用了 tailwindCSS 并遇到了制作页脚的问题.

base.html

footer.html

{% 加载静态 %}<img src="{% static "images/logo_white.png" %}" width="70px"><p class="text-white">&copy~~~~~~</p></页脚>

我尝试了静态、绝对、固定、相对...但.固定覆盖内容块和相对使页脚向上.或 .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"> &copy~~~~~~</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:底部的固定/粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！