The reason is that without a parent defined height, the height:100% has nothing to factor 100% percent of, and will default to a value of height:auto- auto is an “as needed value” which is governed by the actual content, so that the height:100% will a=only extend as far as the content demands.
The solution to the problem is by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.
.
