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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

33920閲覧

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

swallowtail

総合スコア60

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2016/05/31 00:44

編集2016/06/04 02:58

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

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

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

###display:flexの場合

CSS

1.BOX{ 2 display:flex; 3 width: 100%; 4} 5.leftBox,.rightBox{ 6 width:50%; 7}

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

CSS

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

投稿2016/05/31 03:15

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

swallowtail

2016/05/31 14:02

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

2016/06/07 16:08

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

0

ベストアンサー

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

CSS

1 2.rightbox { 3 height: calc(50vw / 5 * 3 + 100px); /* 5 = 500/100; 3 = 画像数 */ 4} 5.rightbox.item4 { height: calc(50vw / 5 * 4 + 100px); } /* CMSでitem4クラスを振る */ 6.rightbox.item5 { height: calc(50vw / 5 * 5 + 100px); } /* CMSでitem5クラスを振る */ 7```**動くサンプル:**[https://jsfiddle.net/cn2p7md3/](https://jsfiddle.net/cn2p7md3/) 8 9--- 10 11あとは JavaScript を使ってしまったほうが早いです。 12 13```JavaScript 14$( function() { $( window ).on( 'load resize', function() { 15 $( '.rightBox' ).height( $( '.leftBox' ).height() ); 16} ).resize(); } ); 17```**動くサンプル:**[https://jsfiddle.net/cn2p7md3/1/](https://jsfiddle.net/cn2p7md3/1/)

投稿2016/06/07 17:50

編集2016/06/07 17:51
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

swallowtail

2016/06/08 00:20

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

2016/06/15 01:21

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

2016/06/15 02:01

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

0

jsFiddleでのサンプル

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

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

投稿2016/06/07 04:40

編集2016/06/07 04:42
hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

height=25vw;

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

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

投稿2016/05/31 01:09

nobuzoh

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

swallowtail

2016/05/31 01:24

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

2016/05/31 04:10

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

2016/05/31 14:45

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

2016/06/15 02:11

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

0

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

css

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

投稿2016/05/31 00:53

may88seiji

総合スコア79

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

swallowtail

2016/05/31 01:13 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問