title: Bootstrap rows overlapping
body: <p>I have an issue. I'm trying to make bootstrap grid system with 4 rows, but the problem some rows are overlapped. I don't know from where comes this problem. 
  this  fiddle shows my issue </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>html, body{
      width: 100% !important;
      height: 100% !important;
      padding:0;
      position: relative;
    }
    #header-sec{
      position: absolute;
      /*top: 0;*/
      width: 100%;
      background-color: green;
      height : 15%;
      min-height: 30px;
    }
    #footer-sec{
      position: absolute;
      bottom: 0;
      width: 100%;
      background-color: black;
      height : 5%;
  
  
    }
    #data-viewer{
      height : 60%;
  
    }
    #zone-geog{
      height : 20%;
  
    }</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"/&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
      &lt;div id="header-sec" class="row"&gt;
          &lt;div class="col-sm-12"&gt;header&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="zone-geog" class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          zone geog
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="data-viewer" class="row bg-primary"&gt;
          &lt;div class="col-sm-9"&gt;map&lt;/div&gt;
          &lt;div class="col-sm-3"&gt;idica evolu&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer-sec" class="row"&gt;
          &lt;div class="col-sm-12"&gt;footer&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>if you have any ideas please help me solve this issue. </p>