在webapp中，子元素未加载，导致父元素高度坍塌应该怎么解决？

Question

问题描述

vue+vant写一个webapp，以文章收藏页为例结构为navbar+list+tabbar，文章列表是自己改造的组件，主要实现下划无限加载。在刚进入文章收藏页时，文章列表没有加载出来，navbar和tabbar之间高度就没有撑起来。
以下是加载中拼手速截的图：

这是加载完成之后的图：

在webapp实际应用场景中，高度不是定值，所以我想问一下该在哪一层做设置来防治因为子元素没有完全加载导致的高度坍塌呢？

问题出现的环境背景

vue/cli 4.4.0
vant 2.9.3

相关代码

页面结构：

<template>
    <div class="collection bg-white">
      <div class="header">
        <navbar :isShowBack="false" />
      </div>
      <div class="list">
        <article-list :collection="true" />
      </div>
      <div class="footer">
        <tabbar />
      </div>
    </div>
</template>

我尝试了一下“万能清除法”，给list属性，然而依旧坍塌，可能是我理解有误：

<style lang="scss" scoped>
.list:after {
    content: ""; /* 添加内容 */
    clear: both; /* 清楚两侧浮动 */
    display: block; /* 转换元素类型为块元素 */
    height: 0;
    overflow: hidden; /* 溢出隐藏属性 */
    visibility: hidden; /* 隐藏属性 */
}
</style>

期待的结果

希望能保证页面的高度，tabbar保持在页面的底部，且适合移动端webapp的解决方法。希望路过的大佬能够指点一下，非常感谢！

Answer 1

你这个布局需要调整下；
如果用的flex:

.collection {
    height:100%;
    display:flex;
    flex-direction:column;
    jusitify-content:space-between;
}
.header{
    height:45px;
}
.list{
    flex:1;
    overflow:auto;
}
.footer{
    height:45px;
}