title: How to set minimum height to the 100% of the viewing screen and half of the page?
body: <p>I have single page site where 1st part main part which should be 100% of the viewers screen/browser size and the 2nd part should be below the viewing area, so when a user clicks on a link , the page gets scrolled down to the second part .</p>
  
  <p>how do i achieve this.,
  i have tried this so far, but its not setting min-height yo 100%</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="firsthalf"&gt;
  this is the first part of the site
  &lt;a href="#help"&gt; &lt;i class="fa fa-question-circle fa-lg"&gt;&lt;/i&gt;
  &lt;div class="notice"&gt;this is aligned to bottom of first half
  &lt;/div&gt;&lt;/div&gt;   
  &lt;/div&gt;    
  
  &lt;div class="container"&gt;
  &lt;div id="help" class="secondhalf"&gt;
  &lt;div class="col-md-8 col-md-offset-2"&gt;
  &lt;div class="well"&gt;
  we are in second part of the site
  &lt;/div&gt;
  &lt;a href="#top" class="btn btn-default"&gt;&lt;i class="fa fa-arrow-up "&gt;&lt;/i&gt; Top&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body, html {
    height: 100%;
  }
  .firsthalf{
  height:100%;
  }
  .notice{
  margin-bottom:0%;
  padding-bottom:5px;
  }
  .secondhalf{
  margin-top:25%;
  margin-bottom:50%;
  padding-top:25px;
  min-height:50%;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4yk2q/" rel="nofollow">http://jsfiddle.net/4yk2q/</a></p>