title: CSS Height working but min-height doesn't work
body: <p>I am having a strange rather weird problem. The problem is a small one that is I want to set min-height to 100% that is the content of the page should span whole screen of he user and if possible the page should extend down if content exceeds 100%.  A simple way would be to set min-height:100% and to set height:auto that is exactly what I want but regardless of how many times I try it the problem remains there. </p>
  
  <p>I am using height auto and min-height:100% on all the elements but it doesn't work. If I remove min-height to include only height:100% then it works like a charm but then when the content is larger it overflows whole footer.</p>
  
  <p>Please help me here is css:</p>
  
  <pre><code>html, body, container, row, col-lg-3, col-lg-9 {
       min-height: 100%;
       height: auto !important;
       height: 100%;
   }
   .container {
       max-width: 1170px;
       min-height: 100%;
       height: auto !important;
       height: 100%;
   }
   .col-lg-3 {
       min-height:100%;
       height:100%;
   }
   .col-lg-9 {
       min-height: 100%;
       height: 100%;
   }
  </code></pre>
  
  <p>Here is the page showing the problem : 
  <a href="http://contestlancer.com/ai/GP/">http://contestlancer.com/ai/GP/</a></p>