title: How to adapt the height of a <div> in BootStrap ScrollSpy?
body: <p>I am developing a website with bootstrap 3 scrollspy. I want each div to fit the size of the screen, but I can't make it work...how can I do this?
  After this, second question: how can I make the first div not going behind the navbar fixed on top? Thank you!</p>
  
  <p>my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="css/default.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Il Luculliano&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="#section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#section3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Section 4 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#section41"&gt;Section 4-1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#section42"&gt;Section 4-2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;    
  
      &lt;div id="section1" class="container-fluid"&gt;
        &lt;h1&gt;Section 1&lt;/h1&gt;
        &lt;p&gt;Click on the different Section links in the navbar to see the smooth scrolling effect.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="section2" class="container-fluid"&gt;
        &lt;h1&gt;Section 2&lt;/h1&gt;
        &lt;p&gt;Click on the different Section links in the navbar to see the smooth scrolling effect.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="section3" class="container-fluid"&gt;
        &lt;h1&gt;Section 3&lt;/h1&gt;
        &lt;p&gt;Click on the different Section links in the navbar to see the smooth scrolling effect.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="section41" class="container-fluid"&gt;
        &lt;h1&gt;Section 4 Submenu 1&lt;/h1&gt;
        &lt;p&gt;Click on the different Section links in the navbar to see the smooth scrolling effect.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="section42" class="container-fluid"&gt;
        &lt;h1&gt;Section 4 Submenu 2&lt;/h1&gt;
        &lt;p&gt;Click on the different Section links in the navbar to see the smooth scrolling effect.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
    // Add scrollspy to &lt;body&gt;
    $('body').scrollspy({target: ".navbar", offset: 50});   
  
    // Add smooth scrolling on all links inside the navbar
    $("#myNavbar a").on('click', function(event) {
      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
  
        // Store hash
        var hash = this.hash;
  
        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){
  
          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      }  // End if
    });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my CSS:</p>
  
  <pre><code>body {
        position: relative; 
        height: 100%;
    }
    #section1 {padding-top:50px;height:100%;color: #fff; background-color: #1E88E5;}
    #section2 {padding-top:50px;height:100%;color: #fff; background-color: #673ab7;}
    #section3 {padding-top:50px;height:100%;color: #fff; background-color: #ff9800;}
    #section41 {padding-top:50px;height:100%;color: #fff; background-color: #00bcd4;}
    #section42 {padding-top:50px;height:100%;color: #fff; background-color: #009688;}
  </code></pre>