title: Why the webpage is not scrolling down even if the content is present in django?
body: <p>I have some code which connects the base.html to index.html using django. The problem is the page is not scrolling down even though extra content is present below. I have added overflow css attribute also. But still,it is not working.</p>
  
  <p>The base.html is:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  {% load staticfiles %}
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Star Social&lt;/title&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="{% static 'simplesocial/css/master.css'%}"&gt;
  
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
  
      &lt;nav class="navbar  mynav" role="navigation" id="navbar"&gt;
                  &lt;div class="container"&gt;
  
              &lt;a class="navbar-brand mynav" href="{% url 'home' %}"&gt;Star Social&lt;/a&gt;
  
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              {% if user.is_authenticated %}
                        &lt;li&gt;&lt;a href="{% url 'posts:create' %}" class="btn btn-simple"&gt;Post&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="{% url 'groups:all' %}" class="btn btn-simple"&gt;Groups&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="{% url 'groups:create' %}" class="btn btn-simple"&gt;Create Group&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="{% url 'accounts:logout' %}" class="btn btn-simple"&gt;Log out&lt;/a&gt;&lt;/li&gt;
                              {% else %}
                                    &lt;li&gt;&lt;a href="{% url 'groups:all' %}"class="btn btn-simple"&gt;Groups&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="{% url 'accounts:login' %}" class="btn btn-simple"&gt;Log in&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="{% url 'accounts:signup' %}" class="btn btn-simple"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
                              {% endif %}
                          &lt;/ul&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
            {% block content %}
  
            {% endblock %}
  
  
  
  
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
  
  
    &lt;/body&gt;
    &lt;script src="{% static "simplesocial/js/master.js"%}" type="text/javascript" &gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The index.html is:</p>
  
  <pre><code>    {% extends "base.html" %}
  {% block content %}
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body style="background:black;overflow:scroll"&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="http://www.trendycovers.com/covers/make_a_wish_facebook_cover_1484111405.jpg" alt="Los Angeles" style="width:100%;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://www.hdnicewallpapers.com/FacebookCover/Strength_Thought_Facebook_Cover_Photo.jpg" alt="Chicago" style="width:100%;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://cdn.techgyd.com/35-Most-Amazing-Facebook-Cover-Photos-HD-10-1.jpg" alt="New york" style="width:100%;"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div style="color:white"&gt;
  
          &lt;h1&gt;Welcome to Star Social!&lt;/h1&gt;
          &lt;h2&gt;The best community for all things on outer space!&lt;/h2&gt;
          &lt;h2&gt;Login or Sign-up for free to get started!&lt;/h2&gt;
          &lt;h2&gt;Have Fun!&lt;/h2&gt;
          &lt;h2&gt;Have Fun!&lt;/h2&gt;
          &lt;h2&gt;Have Fun!&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;/body&gt;
  {% endblock %}
  </code></pre>
  
  <p>The css file is:</p>
  
  <pre><code>body {
    margin: 0;
    overflow: auto;
    background-color: black;
    color:white;
  }
  </code></pre>
  
  <p>Why is the problem occuring?</p>