Tailwindcss：底部的固定/粘性页脚
dho*_*onk 29 django tailwind-css
我使用 tailwindCSS 并遇到制作页脚的问题。
基本文件
<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"> ©~~~~~~</p>
</footer>
我尝试了静态、绝对、固定、相对...但是 .fixed 覆盖了内容块，并且相对使页脚向上。或 .mb-0、.bottom-0 不起作用。
是否可以将页脚固定在底部？
Dmi*_* S. 94
<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类。
你会得到这个用户界面：
- 这不是粘性页脚，这只是页脚。如果内容比屏幕高，那么它只会将页脚向下推。https://codepen.io/therms/pen/BaREVNN (16认同)
- @DustinWyatt 抱歉，但这正是“粘性页脚”应该有的样子。Google“粘性页脚”“粘性页脚模式是指在内容短于视口高度的情况下，页面的页脚“粘”到视口底部的一种模式。” (12认同)
shr*_*kuu 50
2022 年的新解决方案。Codepen 演示中的 Tailwindcss 版本 3.0.24。
<div class="min-h-screen">
<div>Content</div>
<div class="sticky top-[100vh]">Footer</div>
</div>
- 不适合我。 (2认同)
- 对我来说效果很好！谢谢。 (2认同)
ffx*_*x14 32
另一种方法是使用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>- TailwindCSS 3 中的 flex-grow 现在是：“grow” (23认同)
One*_*ezy 25
S\xc3\xadlvio Rosa最近发现的另一种方法是在页脚上使用position: sticky+ 。使用TailWindCSStop: 100vh实现这一目标的方法是......
<html class="min-h-screen">\n <body class="min-h-screen">\n \n <header>Header</header>\n <main>Content</main>\n <footer class="sticky top-[100vh]">footer</footer>\n\n </body>\n</html>\n您可以在此处阅读有关 CSS 技巧的完整文章
\njfu*_*unk 10
这里的解决方案都不适合我，因为我的组件不是布局组件。我希望粘性页脚仅出现在单个页面上，并且需要忽略父容器的边距和填充。这是对我有用的顺风解决方案：
<div className="fixed bottom-0 left-0 bg-red-500 w-screen h-12">
Sticks to bottom, covers width of screen
</div>
粘性页眉和页脚
对于粘性页眉和页脚，无论内容和屏幕大小如何，请执行以下操作：
<div class="flex flex-col h-screen">
<div class="sticky top-0 z-50">header</div>
<div class="grow">content</div>
<div class="sticky bottom-0 z-50">footer</div>
</div>
不使用 margin 的解决方案：
.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>另一个如此聪明的解决方案是使用sticky top-[100vh]页脚。作者：克里斯·科伊尔
.as-console-wrapper {
display: none !important; /* just to hide stackoverflow console warning */
}<script src="https://cdn.tailwindcss.com"></script>
<div class="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>| 归档时间： |
|
| 查看次数： |
28253 次 |
| 最近记录： |