0
559
VistasTailwindcss: pie de página fijo/adhesivo en la parte inferior
Uso tailwindCSS y enfrento un problema con make footer.
base.html
<body> {% include "partials/nav.html" %} {% block content %} {% endblock %} {% include "partials/footer.html" %} </body>pie de página.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"> ©~~~~~~</p> </footer>Probé static,absolute,fixed,relative... pero .fixed cubre el bloque de contenido y el relativo hace que el pie de página vaya al revés. o .mb-0, .bottom-0 no funciona.
¿Es posible hacer que el pie de página se fije en la parte inferior?
5 Respuestas
Responde la pregunta0
<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> No se requiere justify-between , pero lo dejaría (para otro caso).
Entonces, juega con las clases h-screen y mb-auto .
Y obtienes esta interfaz de usuario:
0
Una solución sin usar margen:
.as-console-wrapper { display: none !important; /* just to hide stackoverflow 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> Otra solución tan inteligente es usar sticky top-[100vh] para el pie de página. por Chris Coyier
.as-console-wrapper { display: none !important; /* just to hide stackoverflow 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>0
use 'fijo' en lugar de 'estático'
class="fixed bottom-0"
0
Otro enfoque sería usar 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>0
Esto ha sido un gran dolor para mí recientemente. Terminé resolviendo esto sin flex , simplemente le di a mi cuerpo una altura mínima de 75vh y parece haber producido el resultado deseado.