Django Tailwindcss：底部的固定/粘性页脚_Django_Tailwind Css

Django Tailwindcss：底部的固定/粘性页脚

django

Django Tailwindcss：底部的固定/粘性页脚,django,tailwind-css,Django,Tailwind Css,我使用tailwindCSS，遇到了makefooter的问题 base.html <body> {% include "partials/nav.html" %} {% block content %} {% endblock %} {% include "partials/footer.html" %} </body> <footer class="w-full h-64 bg-gray-900 static bot

我使用tailwindCSS，遇到了makefooter的问题

base.html

  <body>
    {% include "partials/nav.html" %}

    {% block content %}
    {% endblock %}

    {% include "partials/footer.html" %}
  </body>

<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>


{%include“partials/nav.html”%}
{%block content%}
{%endblock%}
{%include“partials/footer.html”%}

footer.html

  <body>
    {% include "partials/nav.html" %}

    {% block content %}
    {% endblock %}

    {% include "partials/footer.html" %}
  </body>

<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>


{%load static%}
复制（&p）~~~~~~

我试过静态的，绝对的，固定的，相对的。。。但是。固定的封面内容块和相对页脚向上。或者.mb-0、.bottom-0不起作用

是否可以将页脚固定在底部？


<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

不是必需的，但我会离开他（因为其他情况）

因此，请使用

h-screen

和

mb auto

类

你会得到这个用户界面：

另一种方法是使用flex-grow


标题
内容
页脚

这是我最近的一大痛苦。我在没有flex的情况下解决了这个问题，我只是给了我的身体一个75vh的最小高度，它似乎已经产生了预期的结果。

这是一个非常好的解决方案，但是如果你想用这个设置应用页面范围的类（比如背景色），你需要分别为每个元素设置。如果页面内容短。。进展不太顺利buttom@HosMercury对我来说，我所做的只是“flex-flex-col h-screen justify between”，如果我删除了“justify between”，那么它不会走得太远，非常感谢。