title: stop div extending below parent
body: <p>I have a div in a div, however the second div does not start right at the top of the parent div, it is shunted down by a header. This second div contains a lot of stuff and will need to scroll, so I set it to 100% height and to allow overflow; however, because it doesn't start right at the top of the parent div, it extends over the bottom of the parent.</p>
  
  <p>Here it is as a code snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
      overflow:hidden;
      margin:0;padding:0
  }
  
  .profile-box {width: 46.6%; /*max-width: 560px;*/ height: 35%; max-height:600px; background-color:white; margin:1.6%; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
  .profile-form {margin-right:5; margin-left:auto; padding-right:3%;}
  .profile-slider {width:45%}
  .profile-slider-label {margin-right:1%}
  
  .left-align {float:left;}
  .right-align {float:right;}
  .y-scolling {overflow-y:auto; overflow-x:hidden; height:100%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;body&gt;
      &lt;div class="profile-box right-align" style="background-color:red"&gt;
           &lt;h2&gt;Lifestyle&lt;/h2&gt;
           &lt;p class="left-align"&gt;Scroll for more&lt;/p&gt;
           
           &lt;div class="form-horizontal" style="background-color:grey"&gt;
               &lt;div class="y-scolling" style="background-color:yellow"&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;&lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   &lt;div class="form-group profile-form"&gt;
                       &lt;input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" /&gt;
                       &lt;label class="control-label right-align profile-slider-label" for="cat1"&gt;Cat1&lt;/label&gt;
                   &lt;/div&gt;
                   
                   &lt;!-- more of these --&gt; 
               &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/Ojb3g.jpg" alt="As you can see, the same height as its container, but just offset."></p>
  
  <p><img src="https://i.stack.imgur.com/p3rP5.jpg" alt="More colours in the divs"></p>