CSS3的固定在底部屬性可以讓我們的網頁元素始終固定在底部不斷地滾動,使整個網站的設計更加美觀。
使用CSS3實現固定在底部非常簡單,只需要給元素添加以下代碼:
.footer{ position: fixed; bottom: 0; width: 100%; }
其中,position:fixed屬性是指元素的位置固定在頁面中,不隨頁面滾動而改變。bottom:0屬性是指元素距離頁面底部的距離為0,使元素始終保持在底部位置。同時,width:100%屬性保證元素的寬度占滿整個屏幕。
需要注意的是,使用CSS3固定在底部屬性時,如果底部高度過小,可能會導致元素被遮擋。此時,可以在底部添加一個空的占位元素來避免遮擋。具體實現方法如下:
.footer-placeholder{ height:50px; }
在底部HTML中加入占位元素:
<div class="footer-placeholder"></div><div class="footer">底部元素</div>
通過以上代碼,我們就可以實現一個簡單的固定在頁面底部的元素了。
上一篇css3中絕對定位
下一篇css33d旋轉輪播圖