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

Question

我使用 angular5 开发一页 web 应用程序，并且我使用 bootstrap4 进行页面布局。

具有经典布局 - 页眉 - 正文 - 页脚。

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

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

Answer 1

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

的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该类。