Tailwindcss：底部的 fixed/sticky 页脚

Question

我使用 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 不起作用。

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

Answer 1

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

你得到这个 UI:

Answer 2

另一种方法是使用 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>

Answer 3

最近这对我来说是一个很大的痛苦。我最终在没有 flex 的情况下解决了这个问题，我只是给了我的 body 一个 75vh 的 min-height，它似乎产生了预期的结果。

Answer 4

使用'fixed'代替'static'

class="fixed bottom-0"

Answer 5

不使用保证金的解决方案：

.as-console-wrapper {
  display: none !important; /* just to hide Whosebug console warning */
}

<script src="https://cdn.tailwindcss.com"></script>

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

另一个非常聪明的解决方案是使用 sticky top-[100vh] 作为页脚。 by Chris Coyier

.as-console-wrapper {
  display: none !important; /* just to hide Whosebug console warning */
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col min-h-screen">
  <header class="bg-yellow-600">content</header>
  <div class="bg-blue-600">content</div>
  <footer class="bg-red-400 sticky top-[100vh]">footer</footer>
</div>

Answer 6

Sílvio Rosa 最近发现的另一种方法是在页脚上使用 position: sticky + top: 100vh。使用 TailWindCSS 实现此目的的方法是...

<html class="min-h-screen">
  <body class="min-h-screen">
    
    <header>Header</header>
    <main>Content</main>
    <footer class="sticky top-[100vh]">footer</footer>

  </body>
</html>

您可以阅读有关 CSS 技巧的完整文章 here

Answer 7

在布局组件中的第一个 div 上使用 h-[100vmin] 自定义 class，通常如下所示：

<Layout>
  <div class="container">
    <div class="h-[100vmin]">
      ...
    </div>
  </div>
</Layout>

Answer 8

2022 年的新解决方案。codepen 演示中的 Tailwindcss 版本 3.0.24。

<div class="h-screen">
  <div>Content</div>
  <div class="sticky top-[100vh]">Footer</div>
</div>

codepen demo

Tailwindcss：底部的 fixed/sticky 页脚

Tailwindcss: fixed/sticky footer on the bottom

css

django

tailwind-css