我使用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"> ©~~~~~~</p>
</footer>我試過靜態、絕對、固定、相對...酪固定覆蓋內容塊和相對使頁腳向上走。或者。mb-0，。倒數-0不管用。
有沒有可能讓頁腳固定在底部？
類justify-between是不需要的，但我會離開他(為其他情況)。
所以，玩玩h屏和mb自動類。
你會看到這個界面:
另一種方法是使用flex-grow。
<link 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>使用“固定的”而不是“靜態的”
class = & quot固定底部-0 & quot；
2022年新方案。codepen演示中的Tailwindcss版本3.0.24。
<div class="min-h-screen">
<div>Content</div>
<div class="sticky top-[100vh]">Footer</div>
</div>codepen演示
西爾維奧·羅薩最近發現的另一種方式是在頁腳使用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技巧的完整文章
這里沒有一個解決方案適合我，因為我的組件不是布局組件。我想一個粘頁腳出現在一個頁面上，它需要忽略父容器的空白和填充。以下是對我有效的順風解決方案:
<div className="fixed bottom-0 left-0 bg-red-500 w-screen h-12">
Sticks to bottom, covers width of screen
</div>不使用保證金的解決方案:
.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>這是我最近最大的痛苦。我最終沒有使用flex解決了這個問題，我簡單地給了我的身體一個75vh的最小高度，它似乎產生了想要的結果。
我用的是這個:
<div class="min-h-screen flex flex-col justify-start">
<div>your main content</div>
<footer class="mt-auto">
<div>your footer content</div>
</footer>
</div>我見過的最好的答案是將包含頁腳的容器設置為屏幕高度(' min-h-screen ')，并使其成為flexbox ('flex ')，并將頁腳上方的元素設置為flex-1，這樣它將占用所有空間并將頁腳推到下方。
在您的代碼中，它看起來像這樣:
<body class='flex flex-col min-h-screen'>
{% include "partials/nav.html" %}
<div class='flex-1'>
{% block content %}
{% endblock %}
</div>
{% include "partials/footer.html" %}
</body>對于不考慮內容和屏幕大小的粘性頁眉和頁腳，請執行以下操作:
<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>雖然我在很長一段時間內避免使用display: grid，但使用它似乎是迄今為止最簡單的解決方案(與flexbox解決方案相比):
<script src="https://cdn.tailwindcss.com"></script>
<!-- Wrapper element ('display: grid', 'grid-template-rows' defined) -->
<div class="min-h-screen grid grid-rows-[min-content_1fr_min-content] ">
<header class="bg-blue-200">Header</header>
<!-- Content element (display: grid) -->
<main class="grid bg-blue-300">Content</main>
<footer class="bg-blue-400">Footer</footer>
</div>在布局組件內的第一個div上使用h-[100vmin]自定義類，通常如下所示:
<Layout>
<div class="container">
<div class="h-[100vmin]">
...
</div>
</div>
</Layout>我覺得你可以用absolute bottom-0定位，w-full填充寬度，px和py調整頁腳大小。
為了避免破壞& ltbody & gt：
<main class="min-h-screen"></main>感謝貢獻一個堆棧溢出的答案！
請務必回答問題。提供詳細信息并分享您的研究！但是要避免…
尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。