title: CSS : start scroll bar from specific div
body: <p>I am making a page in which header part is fixed , the center contents are scrolling. I want the header part to occupy whole page including scrollbar area , and I want the scroll bar to be appeared from below the header.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg-dark{
    background:#3a3f51;
  }
  .bg-dark-header{
    position:fixed;
    height: 60px;
    width: 100%;
    z-index:1000;
    top: 0;
    color:white;
  }
  
  .center_content{
    margin-top:40px;
    height:600px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;div class="bg-dark bg-dark-header "&gt;
  
    Header Text
  &lt;/div&gt;
  
  &lt;div class="center_content text-center"&gt;
  Center Content
    Center ContentCenter ContentCenter ContentCenter ContentCenter Content
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So , I want a scroll-bar from <code>center-content</code> div and the header part should occupy whole width.</p>
  
  <p>Any help would be great.</p>
  
  <p>Thank you.</p>