title: How can i set the background color of the page uniform, even after scroll?
body: <p>I have a page layout, which has the bootstrap <code>container</code>.
  I am rendering pages using this layout.</p>
  
  <p>In one page, my <code>div</code> is of just half the height of the screen. And there is another page that I am rendering, it is very big (I have to scroll down).</p>
  
  <p>After setting the <code>background-color</code> of the <code>container</code>, on rendering the first page, only half the page's <code>background-color</code> is displayed, whereas for the second page, the <code>background-color</code> is uniform over the entire page.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html {
      height: 100%;
  }
  
  .mainlayout {
      background-color: lightblue;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='container-fluid'&gt;
  
      &lt;div class='row'&gt;
      Here i am rendering my data for each page. (Flask `jinja` templates)
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I am not sure how can I make the <code>background-color</code> uniform for each page, covering the complete screen.</p>