主题：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>