title: Skrollr init set <body> height to be too high
body: <p>I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.</p>
  
  <p>The problem can be seen here:
  <a href="http://codepen.io/designil/pen/Ggxde">http://codepen.io/designil/pen/Ggxde</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="headrow"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
  
      &lt;div class="col-md-3"&gt;
        &lt;h1 class="logo"&gt;&lt;a href="#"&gt;21GUNS&lt;/a&gt;&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-9"&gt;
        &lt;div class="topmenu"&gt;
          &lt;p&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/p&gt;
          &lt;ul class="list-unstyled"&gt;
            &lt;li&gt;
             &lt;div class="dropdown"&gt;
    &lt;a data-toggle="dropdown" href="#"&gt;MENU 1&lt;/a&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;MENU 2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;MENU 3&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;MENU 4&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;MENU 5&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- headrow --&gt;
  
  &lt;div class="bannerrow"&gt;
    &lt;img src="http://placehold.it/1800x600" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6 col-md-offset-3 text-center"&gt;
          &lt;header&gt;
            &lt;h2&gt;21SERVICES&lt;/h2&gt;
            &lt;p&gt;Drive next-generation technologies vortals engage, systems services dynamic to our clients.&lt;/p&gt;
          &lt;/header&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- row --&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-5"&gt;
          &lt;div class="column2-box"&gt;
            &lt;i class="fa fa-gift fa-fw"&gt;&lt;/i&gt;
            &lt;h3&gt;FLAT DESIGN&lt;/h3&gt;
            &lt;p&gt;End-to-end, user-centred web-readiness cultivate granular drive convergence.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-5 col-md-offset-2"&gt;
          &lt;div class="column2-box"&gt;
            &lt;i class="fa fa-gift fa-fw"&gt;&lt;/i&gt;
            &lt;h3&gt;FLAT DESIGN&lt;/h3&gt;
            &lt;p&gt;End-to-end, user-centred web-readiness cultivate granular drive convergence.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- row --&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-5"&gt;
          &lt;div class="column2-box"&gt;
            &lt;i class="fa fa-gift fa-fw"&gt;&lt;/i&gt;
            &lt;h3&gt;FLAT DESIGN&lt;/h3&gt;
            &lt;p&gt;End-to-end, user-centred web-readiness cultivate granular drive convergence.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-5 col-md-offset-2"&gt;
          &lt;div class="column2-box"&gt;
            &lt;i class="fa fa-gift fa-fw"&gt;&lt;/i&gt;
            &lt;h3&gt;FLAT DESIGN&lt;/h3&gt;
            &lt;p&gt;End-to-end, user-centred web-readiness cultivate granular drive convergence.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- row --&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" /&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@blue: #293448;
  @red: #C1392B;
  
  @import url(http://fonts.googleapis.com/css?family=Open+Sans);
  
  body {
    font-family: 'Open Sans', sans-serif;
  }
  
  .headrow {
    background: @blue;
  }
  
  .logo a {
    color: #fff;
    transition: 0.3s;
  
    &amp;:hover {
      text-decoration: none;
      color: #eee;
    }
  }
  
  .topmenu {
    text-align: right;
  
    p {
      margin-top: 10px;
  
      a {
        display: inline-block;
        margin: 0 5px;
        text-align: right;
      }
    }
  
    ul {
      margin-bottom: 0;
    }
  
    li {
      display: inline-block;
      margin-left: 30px;
  
      a {
        color: #eee;
        display: block;
        padding-bottom: 10px;
        border-bottom: 3px solid transparent;
        transition: 0.3s;
      }
  
      a:hover {
        text-decoration: none;
        border-bottom: 3px solid @red;
      }
  
      .dropdown-menu {
        text-align: left;
  
        li {
          margin: 0;
          display: block;
        }
  
        a:hover {
          background: #ccc;
        }
  
        a {
          color: @blue;
          border: 0;
          transition: 0;
        }
      }
    }
  }
  
  .bannerrow {
    img { width: 100%; height: auto;}
  }
  
  .servicerow {
    color: #fff;
    padding-bottom: 100px;
    background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
    background-size: cover;
  
    header {
      margin-top: 60px;
      margin-bottom: 20px;
  
      h2 { margin-bottom: 10px; }
  
      p { font-size: 13pt; }
    }
  }
    .column2-box {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 15px 0;
  
      i { font-size: 110px; float: left; }
  
      h3 { margin-top: 0; }
  
    }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
    $('.dropdown-toggle').dropdown();
  
     $('.dropdown').hover(function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
      }, function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
      });
  
    var s = skrollr.init({forceHeight: false});
  });
  </code></pre>
  
  <p>I am not sure which element makes the page too high.</p>