CSS可以實現底部隨著頁面浮動,具有很好的視覺效果,尤其是對于長頁面。使用position屬性和bottom等參數可以輕松地實現底部浮動效果。
.footer { position: fixed; /*設置為固定定位*/ bottom: 0; /*底部定位為0*/ margin: 0 auto; /*讓底部居中*/ width: 100%; /*設置元素占滿整個寬度*/ background-color: #111; /*底部背景顏色*/ color: #fff; /*底部文字顏色*/ padding: 10px 0; /*底部內邊距*/ text-align: center; /*文字居中*/ z-index: 9999; /*設置元素的層級*/ }
如上代碼所示,可以把底部元素(如footer)設置為固定定位,bottom定位為0,可以讓底部元素粘貼在瀏覽器視窗的底部。需要注意的是,底部元素的容器高度不可為100%,否則會導致頁面滾動條在底部元素下方,使得底部元素無法浮動。
以上就是CSS實現底部隨著頁面浮動的方法。如果需要其他浮動效果,可以根據需求進行設置。