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

【问题标题】：Tailwindcss：底部的固定/粘性页脚
【发布时间】：2020-05-05 19:07:03
【问题描述】：

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

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>

我尝试了静态、绝对、固定、相对...但是 .fixed 覆盖了内容块和相对使页脚向上。或 .mb-0，.bottom-0 不起作用。

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

【问题讨论】：

标签： css django tailwind-css

【解决方案1】：

另一种不使用边距的解决方案：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex flex-col min-h-screen">
  <header class="bg-yellow-600">content</header>
  <div class="bg-blue-600">content</div>
  <div class="flex-1"></div> <!-- here -->
  <footer class="bg-red-400">footer</footer>
</div>

【讨论】：

【解决方案2】：

使用“固定”而不是“静态”

class="fixed bottom-0"

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

另一种方法是使用 flex-grow。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col h-screen">
    <div class="bg-red-500">header</div>
    <div class="bg-green-500 flex-grow">content</div>
    <div class="bg-blue-500">footer</div>
</div>

【讨论】：

【解决方案5】：

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

justify-between 类不是必需的，但我会离开他（其他情况）。

所以，玩 h-screen 和 mb-auto 类。

你会得到这个用户界面：

【讨论】：

这是一个非常经典的解决方案，但是如果您想使用此设置（如背景颜色）应用页面范围的类，则需要为每个元素单独设置它。
如果页面内容很短......它不会很糟糕
@HosMercury 对我来说确实如此，我所做的只是“flex flex-col h-screen justify-between”，如果我删除“justify-between”，那么它不会走得很深
这不是一个粘性页脚，这只是一个页脚。如果内容比屏幕高，那么它只会将页脚向下推。 codepen.io/therms/pen/BaREVNN
我从未见过如此干净的答案！