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 h

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.