最近在網站開發中遇到了一個問題,就是頁腳未顯示完全。通過檢查代碼發現,這是由于CSS代碼存在問題導致的。下面我將分享一下我的解決方法。
footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background-color: #333; color: #fff; text-align: center; padding: 15px; overflow: hidden; }
我使用的CSS代碼是以上這段,其中的overflow:hidden;是導致問題的罪魁禍首。由于這個屬性,當頁腳里的內容超出容器的高度時,就會被隱藏起來。
我的解決方法是將這個屬性注釋掉。如下:
footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background-color: #333; color: #fff; text-align: center; padding: 15px; /* overflow: hidden; */ }
這樣一來,雖然頁腳里的內容超出了容器的高度,但是瀏覽器會自動添加滾動條,以便用戶可以滑動頁面查看全部內容。
以上就是我的解決方法,希望對大家有所幫助。
上一篇html 背景漸變代碼