在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;
}

Answer 2

你这个问题问的是布局的模式，常用下面2种
1.使用定位属性：
header 和 footer 用 posiotion 定位，然后 list 部分 padding: px 0 px
2.使用用盒模型（flex），
并且 collection 排列方式设置为垂直（flex-direction:column）,
然后 header 和 footer 固定高度，list 自适应

个人比较喜欢盒模型的形式，
每个像素都在预期的位置的感觉很好，强迫症的大胜利！

Answer 3

min-height 啊给个最小高度，用 calc 配合 vh 算最小高度。

另外一个办法就是父容器高度给足 100% 然后弄成纵向的 flex 然后给中间的容器 flex:1;

Answer 4

从纯粹的技术角度可以按照楼上诸位说的最小高度、填充屏幕等方法实现。
但是从用户体验角度来看，进入这个页面的时候是白板一片，体验极其糟糕，所以这不仅仅是一个布局塌陷的问题，还是一个用户体验欠优化的问题。
所以最佳的解决方案，是进入页面的时候就渲染好第一屏的列表；
次一点的解决方案，就是使用骨架屏填充，大致描绘出内容加载后的样子，让用户知道这里有内容但是需要稍作等待；
再次一点的解决方案，就是加个 Loading 动画，乞求用户不要秒关。

---

当然， tabbar 的方案也不对，它应该直接 fixed 固定在底部。

Answer 5

设定min-width