這裡演示了如何將一個 div 元素固定在頁面底部。
以下是一個簡單的範例,展示了如何將一個 div 元素對齊到頁面底部。
我在高度超出視窗的情況下,需要將一個元素固定在頁面底部,但如果屏幕尺寸不夠,它仍然需要跟隨頁面流動。
以下是我使用 Tailwind CSS 創建的非常簡化的範例:
<html>
<body class="text-center">
<p>test</p>
<p>© 2022</p>
</body>
</html>
我們希望 “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>© 2022</p>
</body>
</html>
這段代碼生成以下結果: