主題：vue專案中，公用footer元件底部位置的適配問題

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

可能有的小夥伴首先會想到用固定定位：

position : fixed;
bottom : 0;

這種方式可以將footer固定在底部，但是會引入一個新的問題：如果頁面內容超過一屏，那麼footer元件就會覆蓋掉頁面內容！！！

最終解決方案：給內容不足以撐滿瀏覽器可視高度的頁面新增以下設定，通過動態監測瀏覽器視窗高度變化，，設定頁面容器的最低高度，也就是footer正常載入，但是footer的兄弟容器的高度變化了，自身的位置也會變化。

script：

this.minHeight = document.documentElement.clientHeight - 100;
//100是footer的高度，如果頂部導航欄也固定的話需要再減去nav的高度
let that = this;
window.onresize = function () {
    that.minHeight = document.documentElement.clientHeight - 100;
}

template：

<homeComponent :style="{minHeight: minHeight+'px'}"></homeComponent>