html - CSS Height working but min-height doesn't work

Question

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.

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.

Please help me here is css:

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%;
 }

Here is the page showing the problem : http://contestlancer.com/ai/GP/

Answer 1

Yes this is a pain but that's how it works. Height can be inherited from positioned parents but not when these have a min-height property.

Children of elements that have a min-height set to 100% cannot inherit their parent's height via percentage...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 specs :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Use position: relative; height: 100% on containers to work around the problem, and add min-height: 100%; to the deepest child.