最近在使用Vue開發項目的過程中,遇到了一個比較麻煩的問題,就是footer被內容遮擋的情況,經過一番研究和嘗試,終于解決了這個問題。
問題出現的原因是因為footer的定位方式不對,需要使用絕對定位來解決,下面是我使用的解決方案。
footer { position: absolute; bottom: 0; width: 100%; height: 40px; }
通過設置footer的position為absolute,bottom為0,即可使得footer固定在頁面底部,不被內容所遮擋。
需要注意的是,如果頁面內容過少,footer可能會跑到頁面中間,這時可以使用min-height屬性來設置最小高度,確保footer始終在頁面底部。
body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }
通過將body的高度設置為100vh,使得body占據整個屏幕高度,使用flex布局,將main的flex設置為1,使得main占據剩余的空間,并自動適應高度,此時footer始終保持在頁面底部。
綜上所述,遮擋問題的解決方案并不復雜,通過合理的CSS布局即可輕松解決,希望對大家有所幫助。