【CSS】position:absolute な BOX の高さ

レスポンシブデザインを作っていてたまにハマる、width は % なんだけど高さが出せない問題。いつも忘れてるので、解決方法をちゃんとメモ。

div.box {position:absolute; top:0px; left:px; width:80%;}
div.box::before {content:''; display:block; padding-top:100%;}

対象のブロック要素div.boxに::beforeでpaddbing-topを指定すると、高さの計算基準がdiv.boxの width になるので、% 指定の高さを作ることができます。素晴らしきかな疑似要素！素晴らしきかな CSS3 ！