title: fullPage.js not detecting height of dynamic generated content when using scrollOverflow
body: <p>I am using fullpage.js for my website. About fullpage.js everything working fine. I want to open an div on click of pagniation. I am able to open div on click which contains YouTube video. But when div is visible browser scroll will be disabled I am not getting where I go wrong.</p>
  
  <p>here is sample of my code:</p>
  
  <pre><code>$(document).ready(function() {
          $('#fullpage').fullpage({
              verticalCentered: false,
              css3:false,
              navigation: true,
              normalScrollElements: '.text',
              navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
              onLeave: function(index, nextIndex, direction){
  
                  var prevIndex = index - 1;
                  var currentIndex = nextIndex - 1;
  
                  $('#section'+currentIndex).css('transform', 'scale(1.2)');
                  $('#section'+currentIndex).css('transition', 'all 5s ease-in');
  
                  setTimeout(function(){
                      $('#section'+prevIndex).css('transform', 'scale(1)');
                      $('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
                  },500);
  
              },
          });
      });
  </code></pre>
  
  <p>in jquery.fullpage.js </p>
  
  <pre><code>var li = '&lt;li&gt;&lt;a href="#' + link + '" onclick="displayDetails('+i+');"&gt;&lt;span&gt;' + tooltip + '&lt;/span&gt;&lt;/a&gt;';
  </code></pre>
  
  <p>function :</p>
  
  <pre><code>function displayDetails(id)
    {
      $('#text').show();
    }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;style&gt;
  #text {
      position: absolute;
      display:none;
      z-index:999;
      top: 300px;
      width:100%;
      height: auto;
  }
  &lt;/style&gt;
  &lt;div id="text"&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;br&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;br&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;br&gt;
    &lt;iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div id="fullpage"&gt;    
     &lt;div class="section" id="section0"&gt;&lt;/div&gt;
     &lt;div class="section" id="section1"&gt;&lt;/div&gt;
     &lt;div class="section" id="section2"&gt;&lt;/div&gt;
     &lt;div class="section" id="section3"&gt;&lt;/div&gt;
     &lt;div class="section" id="section4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code opens div as expected but scrolling to see last contents is not working. Instead of video if I enter text scroll works perfectly. As soon as I add video in div scroll stops working. I haven't set <code>overflow</code> property for <code>#text</code>. Please help me out.</p>