CSSのみで高さを自動調整する方法について【説明図 追加】

Question

説明が悪すぎたのか回答が得られなかった為、再度説明を書き直して図も入れました。ご回答頂けたら嬉しいです。
bootstrap 3 + sassを用いて全体の構成が図-1になるような組み方をしています。

問題は赤枠の中なのですが、rightBoxのoverflowを有効かつブラウザ幅によってheightの値が可変する仕様であるleftBoxの高さに揃えるため下記のような組み方をした場合、図-2・図-3で説明しているように、ブラウザサイズを狭めるとrightBoxは高さが固定されているためleftBoxの高さを超えて表示されてしまいます。これをブラウザ幅を変更した場合でもrightBoxの高さをleftBoxの高さにリアルタイムに揃える事はCSSのみで可能でしょうか？

<div class="row BOX">
    <div class="col-sm-6 leftBox">
        <div class="list">
            <ul>
                <li>list text</li>
                <li>list text</li>
                ・
                ・
                ・
             </ul>
        </div>
        <div class="imageBox">
            <img src"#" />
            <img src"#" />
            <img src"#" />
        </div>
    </div>
    <div class="col-sm-6 rightBox">
        <div class="inner">
            <div class="wrap">
                <div class="left">
                    <img src="#" />
                </div>
                <div class="right">
                    <p>description text</p>
                </div>
            </div>
            <div class="clearfix wrap">
                <div class="left">
                    <img src="#" />
                </div>
                <div class="right">
                    <p>description text</p>
                </div>
            </div>
            ・
            ・
            ・
        </div>
    </div>
</div>

.BOX {
    width: 100%;

    .leftBox,
    .rightBox {
        width: 50%;
    }

    .leftBox {
        .list {
            height: 100px;
            overflow: auto;
        }

        img {
            width: 100%;
            /* 元の 幅/高さ を 500px/100px と仮定しています */
        }
    }

    .rightBox {
        .inner {
            widrh: 100%;
            height: 400px;
            overflow: auto;
            
            .wrap {
                height: 100px;
            }

        }

    }

}

Answer 1

ご提示いただいているソースだとleftBoxとrightBoxは縦に積み上がって表示されるはずなのですが、
「left」「right」とあるのでこの２つのボックスは横に2カラム表示になっていると仮定していいんですよね？
あと、単純にどんなケースでも２カラムleftBoxとrightBoxの高さが揃えば良いんですよね？

であれば、display:flexまたはdisplay:table-cellを使うことで可能だと思います。
（※他に何か特殊な条件が必要な場合は困難になる可能性がありますが。）

###display:flexの場合

.BOX{
  display:flex;
  width: 100%;
}
.leftBox,.rightBox{
  width:50%;
}

###display:table-cell;の場合

.BOX{
  display:table;
  table-layout: fixed;/*FF,IEでもtable-cell内の画像をフルードイメージ対応させるための記述*/
  width: 100%;
}
.leftBox,.rightBox{
  display:table-cell;
  width: 50%;
}

Comments

[swallowtail]

CSSを一部省略したせいで誤解を招いてしまいました。申し訳ありません。
ご回答で仮定されている通りで間違いありません。
leftBoxにrightBoxの高さを常にいかなる状況でも揃えたいのですが、Flexを使った場合rightBox内のoverflowはどのように指定すればよろしいのでしょうか？

[aKusano]

追加の図を見ました。
恐らくやりたいことはCSSだけでは不可能です。（※私の知るかぎりでは）
leftBoxとrightBoxの高さを自動的に揃えるのは、先の回答通りdisplay:flexなどを活用するとして、その中のコンテンツにoverflowを指定するにはrightBoxの中にもう一つdivを加えてそちらにheightとoverflowを指定するしかないです。
この時overflowを指定した要素のheightは自動的に親に追随させることは困難なので、
そこをjQuery等で動的に指定するようにしてやるしかないかな、と思います。

Answer 2

leftBox の画像が増減するたびにCSSを変えるなら、なんとかCSSで対応できます。HTMLを出力するのがCMSだった場合はひと手間かければ対応できます。ちなみに下記はBOXの padding などを加味していません。（提示が無いため）

.rightbox {
    height: calc(50vw / 5 * 3 + 100px); /* 5 = 500/100; 3 = 画像数 */
}
.rightbox.item4 { height: calc(50vw / 5 * 4 + 100px); } /* CMSでitem4クラスを振る */
.rightbox.item5 { height: calc(50vw / 5 * 5 + 100px); } /* CMSでitem5クラスを振る */
```**動くサンプル：**[https://jsfiddle.net/cn2p7md3/](https://jsfiddle.net/cn2p7md3/)

---

あとは JavaScript を使ってしまったほうが早いです。

```JavaScript
$( function() { $( window ).on( 'load resize', function() {
	$( '.rightBox' ).height( $( '.leftBox' ).height() );
} ).resize(); } );
```**動くサンプル：**[https://jsfiddle.net/cn2p7md3/1/](https://jsfiddle.net/cn2p7md3/1/)

Comments

[swallowtail]

大変わかり易いコメントありがとうございました。
やはりJavaScriptを使ったほうが断然早いんですね。
今までモヤモヤしたままJavaScriptを使っていたので「CSSでも出来る事は出来る」と言う事がわかってスッキリしました！

[nobuzoh]

すみません、今ごろになって補足の図を見たのですが、
leftboxとrightboxを囲むboxwrapperのようなheight:auto、width:100%、position:relativeの要素をつくって、
rightboxを
position:absolute;
width:50%;
right:0;
top:0;
bottom:0;
とすると思ったようになると思いますよ。

[kei344]

https://jsfiddle.net/cn2p7md3/2/
おお、すごい、考え付きませんでした。
それはそうと、せっかくなのでご自身の回答（コメント）に追記されればいかがでしょう。

Answer 3

jsFiddleでのサンプル

aKusanoさんのに手を加えたような形ですが、flexのデザインでjQueryで左右の内容を入れ替えるサンプルを作りました。これは左右の内容が変わった時にどう見えるかのテストというだけで、jQueryは必要ありません。css部分だけでokです。
flexは高い方に自動で高さを合わせるので便利です。

jsFiddleのscssがベンダープレフィックスをつけるかどうかは知りませんが、コンパイル時にはつけるようにして下さい。
またサンプルのresultの境界線を動かして画面幅が変わった時どうなるかを確認してもらうと良いかと思います。

Answer 4

私も最近知ったのですが、
vwという単位があります。

これでビューポートの「幅に対する割合」を高さに指定できます。

例えば、
BOXの100%というものが画面いっぱいの100%であるとしたら、
leftBoxとRightBoxは画面に対して50%の幅になるかと思います。
ここで、
leftBoxとRightBoxを

height=25vw;

とすると
常に高さが幅の半分になります。

説明するまでもないかもしれませんが、
BOXに親要素があって（少なくともbodyはありますよね）、
その親要素のwidthやpaddingが指定されていた場合は
綺麗な割合にならないので、
親要素のwidthやpaddingなども単位をvwで揃えると美しくなるかと思います。

Comments

[swallowtail]

vwという単位があるとは知りませんでした。

ただ、vwは予めleftBox, rightBoxそれぞれの幅に対する高さが決まっていれば使える気がするのですが、今回ののようにleftBoxの高さが不確定で、幅によってleftBox内のimgの高さが変わる、またはimgの数を増やした場合などいかなる場合においてもrightBoxの高さをleftBoxの高さに合わせる方法がわかりません。

[nobuzoh]

ということは、ご質問の内容は
ウインドウ幅に対応した高さ調節
ではなく
近接要素に対応した高さ調節
ということでしょうか？

[swallowtail]

問題点は近接要素で間違いありません。
ブラウザのサイズを変えた時という説明が非常にわかりにくかったのでイメージを追加しました。この場合に赤枠内のleftBoxとrightBoxの高さを揃えたいのですが、どうすれば良いのか解りません。因みにrightBoxはoverflowなので常にleftBoxの高さにrightBoxの高さを併せるといった感じです。

[nobuzoh]

＞せっかくなのでご自身の回答（コメント）に追記されればいかがでしょう。
ということで、ここにも記入しておきます。
補足の図を見たのですが、
leftboxとrightboxを囲むboxwrapperのようなheight:auto、width:100%、position:relativeの要素をつくって、
rightboxを
position:absolute;
width:50%;
right:0;
top:0;
bottom:0;
とすると思ったようになると思います。

Answer 5

CSSのメディアクエリーは使用されましたでしょうか？
見当違いでしたらすみません。

 @media (min-width: 500px) and (max-width: 600px) {
       ↑変更される範囲
    ここに変更後のcssを記述
  }

Comments

[swallowtail]

メディアクエリなどのmeta情報は一通り使用しております。

また、説明がわかりにくかったですね。ごめんなさい。
仮にleftBoxの高さがブラウザ幅が1000px以上の場合に400pxだったと仮定します。
このときにはrightBoxの高さもheight: 400px; でいけまが、これをスマホなどのブラウザサイズが320px相当にした場合、leftBox内にあるimgの高さが変わるので（CSSでimgに100％として、比率固定で可変するようにしています。）rightBoxの高さは400pxで固定されているため高さにズレが生じてきます。
これを今まではJavaScriptで解決していたのですが、CSSだけでいけるものなのかが解りません。