CSS位置屬性是用來定義元素在瀏覽器中的位置。在CSS中,有多種方式可以實現將元素定位在瀏覽器最下方的效果。
其中一種方式是使用定位屬性和bottom屬性。如下代碼:
.footer { position: fixed; bottom: 0; }
上述代碼中,position被設置為fixed,表示將元素固定在視圖中的位置,不隨滾動條的滾動而改變。bottom屬性被設置為0,表示元素與視圖底部的距離為0。
還有一種方式是使用Flex布局。如下代碼:
.container { display: flex; flex-direction: column; min-height: 100vh; } .footer { margin-top: auto; }
上述代碼中,container是包含著頁面內容的容器,必須將其高度設置為viewport的高度。footer則被設置為彈性項,并且通過將其margin-top設置為auto,使其在容器內垂直居底。
在設計網站時,我們通常需要將一些信息、鏈接等放在頁面底部。使用以上兩種方法中的任意一種都可以輕松實現這一目的。
上一篇css如何居中背景圖片
下一篇css 無滾動條