色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue footer遮擋

傅智翔2年前8瀏覽0評論

最近在使用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布局即可輕松解決,希望對大家有所幫助。