要素にposition: absoluteを指定すると親要素の高さが消えてしまいます
子要素の高さの合計が親要素の高さになるようにしたいのですがどうすればよいでしょうか
極力jQueryは使わずにCSSだけで解決したいです
高さは可変なのでheightでしていすることはできません
http://qiita.com/nknkt/items/065b30bbdc1f6508a6f7
この記事を参考にしたのですが下記のようにrelativeを指定したboxクラスの中にふたつのabsoluteを指定した要素があるとうまくいきません
html
1<div class="box ratio-1_1"> 2 <div class="inner"> 3 <p>1 : 1</p> 4 </div> 5 <div class="inner2"> 6 <p>10 : 10</p> 7 </div> 8</div>
css
1.box { 2 position: relative; 3 width: 50%; 4 height: auto; 5 background: #444; 6} 7.ratio-1_1:before { 8 content: ""; 9 display: block; 10 padding-top: 100%; 11} 12.inner { 13 position: absolute; 14 top: 0; left: 0; 15 width: 100%; 16 height: 100%; 17} 18.inner2 { 19 position: absolute; 20 top: 100%; left: 0; 21 width: 100%; 22 height: 100%; 23}
absoluteにしてどのようなレイアウトにしたいのかを具体的に追記してください。