Fullpage.js不在屏幕顶部

时间:2017-09-20 15:21:16

标签: javascript html css django fullpage.js

我遇到全屏js的问题。

问题是整页不在屏幕顶部:

enter image description here

这是我的HTML(我使用Django):

    {% extends 'layout/app.html' %}


    <body>
        {% block content %}
        <div id="fullpage">
                <div class="section" id="section1">Some section</div>
                <div class="section">Some section</div>
                <div class="section">Some section</div>
                <div class="section">Some section</div>
            </div>

        {% endblock %}
    </body>

base.html来自index.html的地方:

{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/normalize/normalize.css' %}" />

    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/fullpage/jquery.fullPage.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/bootstrap/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/style.css' %}" />
    <title></title>

</head>
<body>
    {% block navbar %}
    {% endblock %}
    {% block content %}
    {% endblock %}
    <script src="{% static 'Portfolio/js/bootstrap/bootstrap.min.js' %}"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script src="{% static 'Portfolio/js/fullpage/jquery.fullPage.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                //sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
                anchors: ['Welcome', 'Portfolio', 'Skills', 'About', 'Contact'],


    menu: '#menu',
            scrollingSpeed: 1000
        });

    });
</script>
</body>
</html>

这就是CSS:

#section1 {
    background-image: url(../images/bg.png);
    background-size: cover;
}

我已尝试设置margin : 0我也有normalize.css链接。

因此没有边距或填充应用于整页和正文。什么可能导致这个问题?

编辑:

导航栏是空的,我尝试删除它app.html,它没有用。

编辑:

将所有内容放在一个html文件中可以解决问题。这意味着可能与django的模板引擎有关。但它有什么用呢?

1 个答案:

答案 0 :(得分:1)

我发现了问题, 没有休息空间 charachter加入了身体,将编码改为ANSII。