Why height=100% does not work?

body
{
}

#main /* the direct child div under body */
{
width:100%;
height:100%; /* this does not stretch the div to 100% */
background-color:Gray;
}

The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

So these change will make the height:100% work:
body
{
height:100px;
}

#main /* the direct child div under body */
{
width:100%;
height:100%; /* this does stretch the div to 100% (of body) */
background-color:Gray;
}