W3c according to the width and height properties, the parent element may be apparent from the wide width is set high when the% of high to.
1. width: 100%
<body>
<div style="width:100%;height:100%;background-color:blueviolet;">
width:100%;height:100%; </div>
</body>
// width of 100%, we are now seeing high belonged font-size, rather than 100%;
Basically you can see wide 100% it is easy to achieve, but the height where it can not be set to% ratio (the element will disappear unseen), this is why?
2. height: 100%
% Relative to a parent element is calculated by height in order to make him effective, we need to set the height of the parent element;
special note is that, parent of the element in the <body> not just among the <body >, further comprising the <html>.
So we have to set the height of both at the same time, only one set is not enough:
html,body{ height: 100%; margin: 0; padding: 0; }