用tailwindCSS将页脚固定在底部
hoo
我使用tailwindCSS并遇到make footer问题。
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"> ©~~~~~~</p>
</footer>
我尝试了static，absolute，fixed，relative ...，但是.fixed覆盖了内容块并相对使页脚上升。或.mb-0，.bottom-0不起作用。
是否可以将页脚固定在底部？
德米特里S.
<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。
然后您得到以下UI：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使页脚固定在底部？
- 2
缩小时无法将页脚固定在屏幕底部
- 3
如何使用“ position：absolute”将页脚固定在div的底部？
- 4
如何使用绝对位置将页脚固定在底部？
- 5
使用Bootstrap 3使页脚固定在底部
- 6
不要将页脚固定在底部
- 7
页脚未固定在页面底部
- 8
Android页脚固定在底部，将位于其他视图之上
- 9
根据高度将网站页脚固定在页面底部还是下方？
- 10
为什么我的页脚没有固定在页面底部？
- 11
如何将AppBar固定在底部
- 12
将页脚放在页面底部，但不固定
- 13
Bootstrap中的页脚，该页脚随内容扩展或固定在底部
- 14
Div，固定在底部，固定在顶部
- 15
是否可以将UIView的顶部固定在导航栏的底部？
- 16
如何使STICKY表单内的页眉和页脚（即分别固定在表单的顶部和底部）？
- 17
将页脚固定到页面底部（无页眉）
- 18
使元素固定在屏幕底部
- 19
将容器流体固定在固定顶部和固定底部之间
- 20
将页脚放在底部？
- 21
如何在调整大小时将html元素固定在窗口的底部，而不是在滚动时将其固定在窗口的底部？
- 22
GADBannerView固定在UITableViewController屏幕底部
- 23
CSS布局固定在底部，高度可变
- 24
离子滑块固定在离子含量的底部
- 25
固定在可滚动元素底部的位置
- 26
固定在页面底部的可滚动元素
- 27
约束控件在Xcode中显示为灰色（将工具栏固定在底部）
- 28
滚动时如何将表单元素固定在显示的屏幕底部？
- 29
如何将日期固定在与文本相关的文本的底部和行中？
我来说两句