title: 100% height for body and its child elements
body: <p>I am specifying a background color for the <code>body</code> which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has <code>border-right</code> which also needs to show over the full screen height.</p>
  
  <p>My CSS looks like(sample one) better check my demo    </p>
  
  <p><a href="http://www.mediaserveit.com/demo/vivek/buildmysite_dashboard/project_details.html" rel="nofollow noreferrer">demo page</a></p>
  
  <pre><code>   html,body {
           height: 100%; 
           background-color: #fefefe;
      }
      .cover {
           height: 100%;
      }
      .left_side {
          float: left; 
          height: 100%;
          border-left: 1px solid #ccc;
          width: 31%;  
      } 
  </code></pre>
  
  <p>and html is</p>
  
  <pre><code>     &lt;body&gt;
           &lt;div class="cover"&gt;
              &lt;div class="left_side"&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/body&gt;
  </code></pre>
  
  <p>and the  bgcolor and childs border seems up-to some limited distance only like
         <img src="https://i.stack.imgur.com/dR72l.png" alt="enter image description here">
  what is that problem guys i need that background and border as 100% height.</p>