title: with 100% height and automatically scroll the bootstrap 3
body: <p>Good Afternoon person following'm doing my personal website and I am facing a problem when I put in the resolution below 640x960 resolution. 'm New to bootstrap 3, I'm learning now and I need your help. </p>
  
  <p>Follow my code html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;header class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;&lt;img src="images/logo_natural_estudio.png" height="43" width="200" alt=""&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav nav-pills nav-justified"&gt;
                  &lt;li style="border-right:1px solid #36484c;"&gt;&lt;a onclick="$('body').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="border-right:1px solid #36484c;"&gt;&lt;a onclick="$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});"&gt;Quem Somos&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="border-right:1px solid #36484c;"&gt;&lt;a href="#"&gt;Nosso Trabalhos&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="border-right:1px solid #36484c;"&gt;&lt;a href="#"&gt;O que Fazemos&lt;/a&gt;&lt;/li&gt;
                  &lt;li style="border-right:1px solid #36484c;"&gt;&lt;a href="#"&gt;Nosso Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Fale Conosco&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/header&gt;
  
  
      &lt;section class="container fill" id="section-1"&gt;
  
            &lt;div class="row" id="meioConteudo"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;h4&gt;RESOLVEMOS SEU PROBLEMA!&lt;/h4&gt;
                  &lt;h2&gt;WEB DESIGN&lt;/h2&gt;
                  &lt;h4&gt;DESENVOLVIMENTO WEB CRIATIVO&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;h1&gt;Criação de Blogs e Sites&lt;/h1&gt;
  
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;h1&gt;Layouts Responsivos&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;h1&gt;Design Gráfico&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/section&gt;
  
  
      &lt;section class="container" id="section-2"&gt;
          &lt;div class="row" id="meioConteudo"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;h4&gt;RESOLVEMOS SEU PROBLEMA!&lt;/h4&gt;
                  &lt;h2&gt;WEB DESIGN&lt;/h2&gt;
                  &lt;h4&gt;DESENVOLVIMENTO WEB CRIATIVO&lt;/h4&gt;
                  &lt;p&gt;&lt;a class="btn btn-default btn-lg" role="button" id="btnVeja"&gt;Veja Mais&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  
  &lt;!-- Scripts funcionamento Jquery e Bootstrap --&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="dist/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="dist/js/animatescroll.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My code CSS</p>
  
  <pre><code>body, html{ margin:0; height: 100%;}
  #menu{margin-top: 10px;}
  .navbar-default{ background:#415357; text-align:center;}
  .navbar-default .navabar-nav{cursor: pointer;}
  .navbar-default .navbar-nav &gt; li{font-family: 'Source Sans Pro', sans-serif;}
  .navbar-default .navbar-nav &gt; li &gt; a{ color:#FFF;  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover{ color:#0C0;}
  .nav-pills &gt; li &gt; a{cursor: pointer;}
  #meioConteudo{ text-align:center; padding-top:30px;}
  #meioConteudo h4{font-family: 'Source Sans Pro', sans-serif; font-size:3.4em; font-weight:lighter;color:#3d4e51;}
  #meioConteudo h2{font-family: 'Bitter', serif; font-size:6.8em; font-weight:bolder; margin-top:-30px; color:#3d4e51; margin-bottom:-20px;}
  #btnVeja{ background:#3d4d51; color:#FFF; margin-top:50px;}
  .nav-justified{ padding-top:15px;}
  .nav-justified &gt; li &gt; a{ color:#FFF; }
  .nav-justified &gt; li &gt; a:hover{ background:#304347;}
  .container &gt; .navbar-header, .container &gt; .navbar-collapse{ margin:0;}
  #section-1{padding-top: 50px;}
  #section-2{background:rgb(233, 147, 26); padding-top: 50px;}
  #section-3{background:rgb(22, 145, 190)}
  #section-4{background:rgb(22, 107, 162)}
  #section-5{background:rgb(27, 54, 71)}
  #section-6{background:rgb(21, 40, 54);margin-bottom:-30px}
  
  .container {
      height:100%;
  }
  
  .fill{
      width:100%;
      height:100%;
      min-height:100%;
      background-color:#990000;
      padding:10px;
      color:#efefef;
  }
  </code></pre>
  
  <p>link my site:</p>
  
  <p><a href="http://www.naturalestudio.com.br/bootstrap/" rel="nofollow">http://www.naturalestudio.com.br/bootstrap/</a></p>
  
  <p>Help Help Help..</p>