сделать нижний колонтитул закрепленным на дне с помощью tailwindCSS - PullRequest
Новая
       5

сделать нижний колонтитул закрепленным на дне с помощью tailwindCSS

1 голос
/ 19 января 2020

Я использую попутный ветер CSS и сталкиваюсь с проблемой создания нижнего колонтитула.

base. html

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

    {% block content %}
    {% endblock %}

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

нижний колонтитул. 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>

я пробовал stati c, абсолютное, фиксированное, относительное ... но. Исправлено, охватывают блок содержимого и относительное делает нижний колонтитул движущимся вверх. или .mb-0, .bottom-0 не работает.

возможно ли сделать нижний колонтитул зафиксированным внизу?

1 Ответ

3 голосов
/ 22 января 2020 
<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 классами.

И вы получите этот интерфейс:

enter image description here

...