javascript - 不是全页 fullpage.js 吗？

Question

我现在正在创建一个网站，我使用 fullpage.js 。在我将一些图像放在背景中之前，它看起来还不错(可能是因为无法判断它是否正在发生)。我添加了一个背景，现在我可以看到:

1. 在初始页面上，第一页/部分未全屏显示(底部有一个白色条 - 下一部分的顶部)
2. 调整页面大小时，该条会消失
3. 当调整回初始大小时 - 没有白条
4. 刷新后(任何尺寸)- 出现白色条。
5. 白色条始终(在不同的显示器尺寸/初始窗口尺寸上)高度为 17 像素

我可以提供所有附加信息，例如屏幕截图、代码、CSS 或任何需要的信息。

正文:

<div id="fullpage">
    <div class="section" data-anchor="top">{#top#}
        <div class="bg-photo"></div>
        <div class="content">
            <div>
                <h1>DO ROZPOCZĘCIA POZOSTAŁO</h1>
                <div class='next-event'></div>
            </div>
            <div class="joinButton">
            Dołącz do wydarzenia
            </div>
            <div class="scroll-icon">
                <img src="{{ 'assets/images/scroll_ico.png'|theme }}">
            </div>
        </div>
    </div>
    <div class="section" data-anchor="about">
        o itad + social
    </div>
</div>

CSS:

.bg-photo {
    background-image: url("../images/bg_blurred.png");
    background-repeat: no-repeat;
    width:100%;
    height:100%;
    background-size:cover;
    }
.content {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(11,17,28,0.75);
    }

原来在 IE 上工作正常，但在 Firefox、Chrome 和 Safari 上出现问题。

Answer 1

我试了一个很简单的方法，还好解决了。

添加<div id="head"></div>作为 <div class="section"></div> 中的第一行.

并设置css样式:

#head {
height: 1px}

所以我认为它只需要在该部分的最顶部放置一些元素。