説明が悪すぎたのか回答が得られなかった為、再度説明を書き直して図も入れました。ご回答頂けたら嬉しいです。
bootstrap 3 + sassを用いて全体の構成が図-1になるような組み方をしています。
問題は赤枠の中なのですが、rightBoxのoverflowを有効かつブラウザ幅によってheightの値が可変する仕様であるleftBoxの高さに揃えるため下記のような組み方をした場合、図-2・図-3で説明しているように、ブラウザサイズを狭めるとrightBoxは高さが固定されているためleftBoxの高さを超えて表示されてしまいます。これをブラウザ幅を変更した場合でもrightBoxの高さをleftBoxの高さにリアルタイムに揃える事はCSSのみで可能でしょうか?
html
1<div class="row BOX"> 2 <div class="col-sm-6 leftBox"> 3 <div class="list"> 4 <ul> 5 <li>list text</li> 6 <li>list text</li> 7 ・ 8 ・ 9 ・ 10 </ul> 11 </div> 12 <div class="imageBox"> 13 <img src"#" /> 14 <img src"#" /> 15 <img src"#" /> 16 </div> 17 </div> 18 <div class="col-sm-6 rightBox"> 19 <div class="inner"> 20 <div class="wrap"> 21 <div class="left"> 22 <img src="#" /> 23 </div> 24 <div class="right"> 25 <p>description text</p> 26 </div> 27 </div> 28 <div class="clearfix wrap"> 29 <div class="left"> 30 <img src="#" /> 31 </div> 32 <div class="right"> 33 <p>description text</p> 34 </div> 35 </div> 36 ・ 37 ・ 38 ・ 39 </div> 40 </div> 41</div>
CSS
1.BOX { 2 width: 100%; 3 4 .leftBox, 5 .rightBox { 6 width: 50%; 7 } 8 9 .leftBox { 10 .list { 11 height: 100px; 12 overflow: auto; 13 } 14 15 img { 16 width: 100%; 17 /* 元の 幅/高さ を 500px/100px と仮定しています */ 18 } 19 } 20 21 .rightBox { 22 .inner { 23 widrh: 100%; 24 height: 400px; 25 overflow: auto; 26 27 .wrap { 28 height: 100px; 29 } 30 31 } 32 33 } 34 35}
![guest](/img/icon/icnUserSample.jpg)
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/31 14:02
2016/06/07 16:08