Вот пример:
Обратите внимание, что все красные divs одинаковы height и имеют padding-top:100%;, но у них A и B имеют разные размеры дополнений... и кажется, что ширина родителя меняет это значение (обратите внимание, что C изменяет height родителя, но это не изменяет дополнение).
Почему добавление, связанное с шириной таким образом?
Изменить: по историческим причинам, а в случае, если jsfiddle уходит, код, который я использовал в моем примере, выглядит следующим образом:
.outer {
background-color: green;
height: 300px;
width: 70px;
float: left;
margin-right: 10px;
}
.middle {
background-color: red;
height: 100px;
width: 50px;
padding-top: 100%;
}
.inner {
background-color: blue;
height: 3px;
width: 100%;
}<div class='outer'>
<div class='middle'>
A
<div class='inner'>
</div>
</div>
</div>
<div class='outer' style='width:100px'>
<div class='middle'>
B
<div class='inner'>
</div>
</div>
</div>
<div class='outer' style='height:400px'>
<div class='middle'>
C
<div class='inner'>
</div>
</div>
</div>