title: Bootstrap Screen Fit height content automatically
body: <p>I am using bootstrap and trying to fit the content on a screen(without scrollbar) and auto adjust based on it. I tried setting the html, body and container height to 100% and add overflow but without access. for example when someone made the browser smaller it will autofit height included, currently the width only works</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;       
          &lt;div class="row"&gt;
            &lt;div class="col-xs-12 col-md-3"&gt;
                  &lt;div class="sidebar_container"&gt;
                      &lt;div class="logo_container"&gt;
                          &lt;img class="logo_img" src="img/logo_bg.png" alt="" title="" /&gt;
                      &lt;/div&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
           &lt;div class="col-xs-12 col-md-9 main-content"&gt;
  
                  &lt;div class="row section1"&gt;
                      &lt;div class="col-xs-12 col-md-6 left"&gt;
                              &lt;h4 class="header_title desktop"&gt;Feature One&lt;/h3&gt;
                              &lt;p class="btns desktop"&gt;&lt;a class="link"  href="#"&gt;&lt;button  class="f_button"&gt;Find out more&lt;/button &gt;&lt;/a&gt;&lt;/p&gt; 
                      &lt;/div&gt;
                      &lt;div class="col-xs-12 col-md-6 right"&gt; 
                          &lt;img src="img/section1_bg.png" class="bg_image"&gt;
                          &lt;h4 class="header_title mobile"&gt;Feature One&lt;/h3&gt;
                          &lt;p class="btns mobile"&gt;&lt;a class="link" href="#"&gt;&lt;button class="f_button"&gt;Find out more&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row section2"&gt;
                      &lt;div class="col-xs-12 col-md-9 left"&gt;&lt;img src="img/section2_bg.png" class="bg_image"&gt;&lt;/div&gt;
                      &lt;div class="col-xs-12 col-md-3 right"&gt;                          
                              &lt;h4 class="header_title"&gt;Feature Two&lt;/h3&gt;
                              &lt;p&gt;&lt;a class="link" href="#"&gt;&lt;button class="f_button"&gt;Find out more&lt;/button&gt;&lt;/a&gt;&lt;/p&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row section3"&gt;
                      &lt;div class="col-xs-12 col-md-3 left"&gt;
                              &lt;h4 class="header_title desktop"&gt;Feature Three&lt;/h3&gt;
                              &lt;p class="btns desktop"&gt;&lt;a class="link"  href="#"&gt;&lt;button  class="f_button"&gt;Find out more&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;              
                      &lt;/div&gt;
                      &lt;div class="col-xs-12 col-md-9 right"&gt;
                          &lt;img src="img/section3_bg.png" class="bg_image"&gt;
                          &lt;h4 class="header_title mobile"&gt;Feature Three&lt;/h3&gt;
                          &lt;p class="btns mobile"&gt;&lt;a class="link" href="#"&gt;&lt;button class="f_button"&gt;Find out more&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row section4"&gt;
                      &lt;div class="col-xs-12 col-md-8 left"&gt;
                      &lt;img src="img/section4_bg.png" class="bg_image"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xs-12 col-md-4 right"&gt;
                              &lt;h4 class="header_title"&gt;Feature Four&lt;/h3&gt;
                              &lt;p&gt;&lt;a  class="link" href="#"&gt;&lt;button  class="f_button"&gt;Find out more&lt;/button &gt;&lt;/a&gt;&lt;/p&gt;  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
           &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>