Question

我有一些使用django将base.html连接到index.html的代码。问题是即使下面有额外的内容，页面也不会向下滚动。我也添加了overflow css属性。但是，它仍然没有用。

base.html是：

    <!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>Star Social</title>
    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'simplesocial/css/master.css'%}">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>


  <body>

    <nav class="navbar  mynav" role="navigation" id="navbar">
                <div class="container">

            <a class="navbar-brand mynav" href="{% url 'home' %}">Star Social</a>

                        <ul class="nav navbar-nav navbar-right">
                            {% if user.is_authenticated %}
                      <li><a href="{% url 'posts:create' %}" class="btn btn-simple">Post</a></li>
                      <li><a href="{% url 'groups:all' %}" class="btn btn-simple">Groups</a></li>
                      <li><a href="{% url 'groups:create' %}" class="btn btn-simple">Create Group</a></li>
                      <li><a href="{% url 'accounts:logout' %}" class="btn btn-simple">Log out</a></li>
                            {% else %}
                                  <li><a href="{% url 'groups:all' %}"class="btn btn-simple">Groups</a></li>
                                  <li><a href="{% url 'accounts:login' %}" class="btn btn-simple">Log in</a></li>
                                  <li><a href="{% url 'accounts:signup' %}" class="btn btn-simple">Sign up</a></li>
                            {% endif %}
                        </ul>



                </div>
            </nav>
          {% block content %}

          {% endblock %}




<canvas id="canvas"></canvas>



  </body>
  <script src="{% static "simplesocial/js/master.js"%}" type="text/javascript" ></script>
</html>

index.html是：

    {% extends "base.html" %}
{% block content %}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body style="background:black;overflow:scroll">

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://www.trendycovers.com/covers/make_a_wish_facebook_cover_1484111405.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="http://www.hdnicewallpapers.com/FacebookCover/Strength_Thought_Facebook_Cover_Photo.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="http://cdn.techgyd.com/35-Most-Amazing-Facebook-Cover-Photos-HD-10-1.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div style="color:white">

        <h1>Welcome to Star Social!</h1>
        <h2>The best community for all things on outer space!</h2>
        <h2>Login or Sign-up for free to get started!</h2>
        <h2>Have Fun!</h2>
        <h2>Have Fun!</h2>
        <h2>Have Fun!</h2>
  </div>
</div>
    </body>
{% endblock %}

css文件是：

body {
  margin: 0;
  overflow: auto;
  background-color: black;
  color:white;
}

为什么会出现问题？

Answer 1

一个简单的答案是将CSS overflow: scroll添加到base.html文件中的div中。（即style="overflow: scroll"）此溢出属性设置为隐藏在您的某些代码中，也许在某些引导程序中。

即使django中存在内容，为什么网页不向下滚动？

1 个答案: