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

這裡演示了如何將一個 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 讓元素固定在頁面底部

tags: [“flexbox”, “CSS”, “layout”]