需求：

footer為公用組件，其他頁面都需要引入，這是會存在一種情況：有的頁面高度很高，footer組件要放在內容的最后；有的頁面內容很少，高度很低，footer需要放在瀏覽器可視窗口的最底部；窗口高度的變化時，footer的位置需要重新調整。

可能有的伙伴首先想到的

position: fixed; bottom: 0; 

這確實能解決頁面內容不足以撐滿瀏覽器高度的情況，但由于footer組件是公用的，在內容很多的頁面調用時，會出現內容被組件覆蓋的情況。

我最終的解決方案：

給內容不足以撐滿瀏覽器可視高度的頁面添加以下設置，通過動態（監測瀏覽器窗口變化）設置頁面容器最低高度，也就是footer組件正常加載，只是footer的兄弟容器的高度變化了，自身的位置也會變化。

script:

template:

解釋：

頁面第一次mounted()時，計算footer組件兄弟容器user-message的最小高度，其中的170為頂部header加上footer自身的高度，隨后給window添加窗口變化事件，回調函數重新計算minHeight的值，template中minHeight發生改變，footer的位置自然也就發生變化。

效果：

總結

以上所述是小編給大家介紹的vue項目中公用footer組件底部位置的適配問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！