vue子组件更新如何判断父组件的高度？

Question

如题，场景，在父页面index里有header，footer，content是个选项卡加router-view

<template>
<wheader/>
<wtab-panel>
<router-view/>
<wfooter/>
</template>

当content内容比较少，一屏都不到时设置footer为absolute，当超出一屏生成滚动条时footer设置为relative。
方案：
1.在wfooter组件里在router.beforeEach中获取content高度，判断该高度是否大于当前屏幕高度来动态设定footer的position。
问题：
当网速较慢时，渲染还未完成就已经取值，得到的值不准确导致页面最终footer遮挡到内容。
采用的解决方法：
1.setTimeout，150对于网速较差还是无法解决

Answer 1

<template>
 <wheader/>
 <wtab-panel>
 <div class="main">
  <router-view/>
 </div>
 <wfooter/>
</template>

如楼上@古月 所说，我们一般使用min-height解决这个问题，而不是position。

如果wheader组件的高度为50px；wtab-panel组件的高度为30px:

.main{
 min-height:calc(100vh - 80px)
}

Answer 2

感觉给content设置min-height 就能解决你的问题

Answer 3

如果是vue3的话可以了解下suspense,如果不是的话，可以在content里面的异步内容resolve的时候派发一个事件，然后在footer里面的组件监听到相关事件后最近行重新布局

Answer 4

看下 MutationObserver能不能解决你的问题
需要考虑一定的性能消耗问题