html - 检索异步内容之前的 Bootstrap 容器最小高度

Question

我使用 angular5 开发单页 Web 应用程序，我使用 bootstrap4 进行页面布局。

采用经典布局 - 页眉 - 主体 - 页脚。

我在将动态数据(图像)检索到图库到正文容器中时遇到问题。当用户被重定向到图库页面时，异步请求被分派(dispatch)到数据库。同时，正文容器是空的，因此它的高度为零，用户可以在页脚上方看到页眉。

为包含异步内容的容器设置最小高度的最佳做法是什么？

Answer 1

向包装 div 添加一个 loading 类可能是个好主意。

HTML:

<div id="image-wrapper" class="loading">
</div>

CSS:

.loading {
    min-height:500px;
    background-image:url('img/loading-indicator.gif');
    background-position:center;
    background-repeat:no-repeat;
}

然后您可以向异步加载添加一个回调，它会添加已加载的内容，并删除 loading 类。