質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.35%

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 25K+

swallowtail

score 56

説明が悪すぎたのか回答が得られなかった為、再度説明を書き直して図も入れました。ご回答頂けたら嬉しいです。
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;
            }

        }

    }

}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+4

ご提示いただいているソースだとleftBoxとrightBoxは縦に積み上がって表示されるはずなのですが、
「left」「right」とあるのでこの2つのボックスは横に2カラム表示になっていると仮定していいんですよね?
あと、単純にどんなケースでも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%;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/31 23:02

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

    キャンセル

  • 2016/06/08 01:08

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

    キャンセル

checkベストアンサー

+1

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/


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

$( function() { $( window ).on( 'load resize', function() {
    $( '.rightBox' ).height( $( '.leftBox' ).height() );
} ).resize(); } );

動くサンプル:https://jsfiddle.net/cn2p7md3/1/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/08 09:20

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

    キャンセル

  • 2016/06/15 10:21

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

    キャンセル

  • 2016/06/15 11:01

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

    キャンセル

+1

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

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

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

height=25vw;


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/31 10:24

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

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

    キャンセル

  • 2016/05/31 13:10

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

    キャンセル

  • 2016/05/31 23:45

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

    キャンセル

  • 2016/06/15 11:11

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

    キャンセル

+1

jsFiddleでのサンプル

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/31 10:02 編集

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る