vue項目中公用footer組件底部位置的適配問題

需求：

footer為公用組件，其他頁面都需要引入，這是會存在一種情況：有的頁面高度很高，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组件底部位置的适配问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。