U2Kの覚え書き position:absoluteした時のdivの高さを可変にする

グリッドデザインのような横幅可変なサイトで、画像をとかを横幅に合わせて伸縮させたい場合がある。 imgタグであれば、width:100%; だけ指定しておけばOKだが、divとかで、position; absolute;した時など、高さが指定されていないのでうまくいかない。 そんなときの対処法。 ■HTML<div class="box ratio-1_1"> <div class="inner"> <p>1 : 1</p> </div> </div>■css.box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top: 100%; /* 1:1 */ } .inner { positi