How is padding-top as a percentage related to the parent's width?

Question

Here is an example:

http://jsfiddle.net/QZAd8/1/

Notice how all of the red divs are the same height and have padding-top:100%;, yet

Answer 1

If you came here looking for an alternative like I did, you can set padding-top as a percentage of vertical height using a CSS calculation:

padding-top: calc(.25 * 100vh);