CATEGORY

CSS

CSS】position:absolute な BOX の高さ

並んでお勉強

4,897 PV

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

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

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

CATEGORY : CSS

GO TOP