第一次加载时，所有fullpage.js部分都同时显示

Question

要直截了当，我的问题是在初次加载时，所有部分简要地同时显示在一起。

我找到了exact same issue asked by someone else on github，并试图像这样.fp-section {height: 100%!important;}将所有部分的高度设置为100％，但没有用。 （如果我做错了，请纠正我。）

然后我终于找到了一个hiding the body until the fullpage.js is fully loaded可行的解决方案，如下所示：

body {display:none}
body[class*="fp-viewing-"] {display:block}

除了响应型div（应该在特定屏幕宽度下显示）之外，此解决方案都可以正常工作。

为澄清起见，我的html结构由<div id="fullpage">下的<div id="responsive">和body组成，整页div默认显示，而响应div在媒体查询下设置为display: none，仅显示在特定的屏幕宽度上。

我还能做些什么来阻止所有部分在首次加载时显示相同的时间？

Answer 1

关于这些部分的问题，请查看我的回答here。

基本上：

假设#fullpage是您的整页包装程序，并且您将默认选择器用于各节和幻灯片：

html,
body,
#fullpage,
.section,
.slide,
.fp-tableCell,
{
    height: 100%
}