title: Setting a background color in div overflow area
body: <p>I'm using the bootstrap tutorial to build a simple responsive page to learn a bit of html and CSS but I'm struggling with one thing.</p>
  
  <p>I have a fluid container, with 3 columns.  Each column is actually 4 grid columns wide.</p>
  
  <p>I have a div in the first column with a height of 100%, background is black, text is white.  Body and children also have 100% height so that the columns fill the page.</p>
  
  <p>This is fine until, say on a mobile in landscape mode, the text is longer than the screen size.</p>
  
  <p>The div fills the screen with the background as I would expect it too - It's 100% of the height of the screen.  But when you scroll into the area that has overflowed, the background is white so you can't see the text.  What I want is for the overflow area to have the background colour from the column.</p>
  
  <p><a href="https://i.stack.imgur.com/Op946.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Op946.png" alt="You can see the columns end once you scroll down"></a></p>
  
  <p>Edit:  This is my html:</p>
  
  <pre><code>&lt;html lang="en" style="height: 100%"&gt;
  &lt;head&gt;
    &lt;title&gt;Dashboard V2&lt;/title&gt;
    &lt;meta http-equiv="refresh" content="300"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" /&gt;
    &lt;script type="text/javascript"&gt;
  function startTime()
  {
  var today=new Date();
  var h=today.getHours();
  var m=today.getMinutes();
  var s=today.getSeconds();
  // add a zero in front of numbers&lt;10
  m=checkTime(m);
  s=checkTime(s);
  document.getElementById('txt').innerHTML=h+":"+m+":"+s;
  t=setTimeout('startTime()',500);
  }
  function checkTime(i)
  {
  if (i&lt;10)
  {
  i="0" + i;
  }
  return i;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="height: 100%;" onload="startTime()"&gt;
  
  &lt;div class="container-fluid" style="height: 100%;"&gt;
    &lt;div class="row" style="height: 100%;"&gt;
      &lt;div class="col-sm-4 col1" style="height: 100%;"&gt;
          &lt;div class="time"&gt;
              &lt;div id="txt"&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>