這裡演示了如何將一個 div 元素固定在頁面底部。

以下是一個簡單的範例,展示了如何將一個 div 元素對齊到頁面底部。

我在高度超出視窗的情況下,需要將一個元素固定在頁面底部,但如果屏幕尺寸不夠,它仍然需要跟隨頁面流動。

以下是我使用 Tailwind CSS 創建的非常簡化的範例:

<html>
 <body class="text-center">
 <p>test</p>
 <p>&copy; 2022</p>
 </body>
</html>

如何使用 Flexbox 讓元素固定在頁面底部

我們希望 “footer” HTML 元素使用 Flexbox 固定在底部。

首先,我們使用 Flexbox (flex flex-col),並且將最小高度設置為屏幕高度 (min-h-screen)。

接下來,我們在 footer 元素之前添加 flex-grow 屬性:

<html>
 <body class="text-center min-h-screen flex flex-col">
 <p class="flex-grow">test</p>
 <p>&copy; 2022</p>
 </body>
</html>

這段代碼生成以下結果:

如何使用 Flexbox 讓元素固定在頁面底部