100% Div Height Issue
css, height, html, xhtml
Solution
change `height:100%;` to `min-height:100%;` in `.main-container`: http://jsfiddle.net/dLeHL/3/
EDIT:
Percentage heights rules are explained here:
Percentage Heights If the height of an element is set to a percentage, it needs for its parent element to have a set height. In other words, the height of the parent element can't be set to auto. Like many aspects of CSS, this is a bit confusing at first.
Problem
I have two containers (`main-container` and `sub-container`). Body, HTML and main-container have classes of `100%` height whereas `sub-container` fixed in `1000px`. Main-container should be fit with `100%` height in the whole screen even `sub-container` is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement. http://jsfiddle.net/awaises/dLeHL/ Really appreciate your help. Thanks