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

【问题标题】：Why the webpage is not scrolling down even if the content is present in django?为什么即使内容存在于 django 中，网页也不向下滚动？
【发布时间】：2018-05-16 08:21:49
【问题描述】：

我有一些使用 django 将 base.html 连接到 index.html 的代码。问题是即使下方存在额外内容，页面也不会向下滚动。我还添加了溢出 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;
}

为什么会出现问题？

【问题讨论】：

尝试为 myCarousel div 标签赋予高度或检查 HTML div 标签 中的溢出属性，它不应该被精确隐藏
即便如此也无法正常工作
发送您网页的链接。我可能会尽快帮助你。
drive.google.com/open?id=1h2qp0SPW8gJWfN4SqAyV5nMr1lIK7c7g 这是整个 django 项目

标签： javascript python html css django

【解决方案1】：

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

【讨论】：