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