子要素の高さを、高さが指定されていない親要素と同じ高さにする方法(height:100%で指定できない場合)

Question

ある、高さ指定のない親要素と高さを同じにする方法を探しています。

HTMLとしては、

<div>
    <div style="float:left">
        (メイン)
    </div>
    <div style="float:left">
        (サイトバー)
    </div>
</div>

このような2カラムの構図の場合、どうしてもメインのdivの文章に合わせて高さが高くなっていき、サイドバーの高さが短くなります。

このような場合、サイドバーの高さを、親要素目いっぱいにする方法は無いでしょうか？

Answer 1

要素をtableレイアウトのようにできるdisplay:table;があります。
とくに制約がなければdisplay:flex;も使えると思います。

//html
<div>
    <div>
        (メイン)
    </div>
    <div>
        (サイトバー)
    </div>
</div>


//css
div {
	display: table;
}

div > div {
	display: table-cell;
	vertical-align: top;
}

Comments

[GiveAHand]

NatsumiOki様

ご回答ありがとうございます。

ただ、この方法だと、サイドバー部分はメインと同じ高さになりませんでした。

両方を包含する親要素の高さはメインと同じになったので、そういうのに使うのはいいのですが。。。

[NatsumiOki]

中身が別にあってその高さを合わせたいのであれば、それは中の要素の組み方次第だと思います。
提示されているソースの要素だけでは再現しようがないのと、デザインによってやり方を考えることなのでこの情報だけだとアドバイスしづらいですね。

[NatsumiOki]

http://codepen.io/mayo31/pen/mEjJro
↑これがダメってことですよね？

[GiveAHand]

NatsumiOki様

いえ、それとは違っていて、

<div class="contants">
<div class="main">
何か文章<br>
何か文章<br>
何か文章<br>
何か文章<br>
何か文章<br>
何か文章<br>
何か文章<br>
</div>
<div class="side">
メニュー1<br>
メニュー2<br>
メニュー3<br>
</div>
</div>

このように、divの中に、mainとsideという2つのdivがfloat:left;で左右に並んでいる時に、左右のdivの高さを揃えたいという感じです。

でも、mainの文章が可変なので、heightを使わずに変えたいという感じです。

[NatsumiOki]

そのHTML構造でもほとんど同じことなのですが、
http://codepen.io/mayo31/pen/bZjgBg
これがダメなのですか？
実現したいことがよくわかりません。

もともとfloatがついているからfloatはやめたくないってことですか？
もしfloatにこだわらなければならない理由があるのであれば、それで高い方に揃えるというのは、スクリプトを使わないと難しいでしょうね。

[GiveAHand]

NatsumiOki様

お返事が大変遅くなりましてすみません。
あの時は気が動転していたようで、NatsumiOki様の提示してくれた内容の意図もよくの見込めていませんでした。。。

教えて頂いた方法が、私のやりたかったことです。

ありがとうございました！

Answer 2

CSSのみでの対応は、ここで大体説明されています。
ただ、ブラウザのバージョンによっては対応していなかったりするので、
こんな感じのScriptで対応する方が、
問題が起きにくいと思います。

Comments

[GiveAHand]

YukitomoNishino様

ご回答ありがとうございます。

ただ、元々サイトを少しでも軽くするためのやり方を探してまして、そのためにJQuery使ってしまうと本末転倒な部分がありまして。。。

そういうのだと、やっぱり難しいですかね。。。

[LibertyBell3]

Script本体は、3k切っているファイルサイズですが、
jQueryはminでも90kとかあるから、それを危惧しているのでしょうか？

情報が少ないので、憶測になりますが、
大枠のレイアウトで高さを揃えたいというと、
サイドバーに背景色を付けたいのかな？と思うのですが、
それだったら、二つのdivをContainerで包んで、
その背景にサイドバーの幅と同じ画像を背景で指定するのが、
CSSのみでの対応以外では、一番軽いと思います。
数kで済みますし、バージョンを気にする必要もないですしね。

[GiveAHand]

YukitomoNishino様

お返事が遅くなりましてすみません。
jQueryをへたに使うと、他のjQueryと競合したり、自由度が制限されたりと、過去、いろいろと苦労したので、できるだけ使わない方法を探しておりました。

すみません。

でも、この問題は解決できました。

ありがとうございました！