下記のコードは子がabsoluteの時に親の高さが死んでしまうので
親にpadding-topを設定し高さを指定しているコードです。
このコードでは子の高さが可変だった場合親の高さがheight:100%で固定になってしまいます。
子の高さが可変だった場合に親の高さを可変にする方法はあるでしょうか
例 innerが高さ300pxの時は親も300pxにしたい
<div class="box ratio-1_1"> <div class="inner"> <p>1 : 1</p> </div> </div> <style> .box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top: 100%; /* 1:1 */ } .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:red; } </style>