マルチカラムの高さをそろえて見た目すっきり

CSSのみで高さを揃えたいという場合のtips。
ほとんど備忘録なので役に立たないかも。

一応今回は

でやります。

mainを画面いっぱいに指定したい場合(あまりないと思うけど)、

だと表示されません。

heightは親要素の高さが必要で、親要素のbodyは何も指定がなく、デフォルトがautoのためheightも100%ではなくてautoに合わせられてしまう訳でして。

んで、

こうすればいいかな?というとこれでもだめ。
なぜならbodyの親要素htmlがあるから。
というわけで、

こうすると画面いっぱいに表示されます。
正確にはデフォルトのpadding,marginがあるのでその分差し引いてですが。

で、このままコンテンツを入れると溢れます。
なぜなら高さが100%だから100%超えたら溢れるのは当然。

というわけでもう一工夫。

min-heightは最低でもこの高さという指定で、!importantは優先設定です。
無くてもいいんですが、一応他の人がユーザースタイルシート適用したときとかにレイアウトが崩れる場合があるので。
次のheightでautoを指定しているので、高さが100%未満のときはmin-heightが優先適用、それより高さがある場合はそちらに合わせる、という指定です。

ついでマルチカラムの場合。

こういう感じ。
この場合は、

で2色並びます。

ところがこれだと片方が長いともう片方が追随しません。
片方は内容的に100%未満なのでmin-heightが優先されるからです。

この場合はbodyのサイズに合わせてしまえばいいんじゃ、ということで下記。

で、これだとちゃんと表示されません。

理由なんですが、ブラウザの解釈の問題で、
CSSは後から追記したものが有効になるので、
bodyのheight:autoが優先されるんですが、
bodyタグは内容によって可変=autoなのでデフォルトの設定になってしまって高さが決定しないようです。
height:autoを外すとちゃんとbodyが100%になります。

ですが当然コンテンツによってサイズが変わりません。
変わらないように100%にしてしまってますので。

ではmin-heightを外してheight:autoにするとどうなるかというと、
bodyの高さは内容にそった高さになりますが、もう片方は高さがずれます。

これはまずbodyがautoなので、menu,mainの高さもautoに計算されて、
そのあとそれぞれのdiv内部のコンテンツによってそれぞれのdivの高さが計算されてから、
bodyがautoなので高さが再計算されるため、bodyは長いほうに追随するけど短いほうは初回の高さ計算1回で終わるためと思われます。

ちょっと分かりづらいんですが多分そういう計算なんだと思います。

で、なんとかして高さ揃えたいんだって場合は強引にブラウザに計算させるしかないらしく、
下記のように指定すると表示されたりします。

32767pxはIEでの表示上限サイズです。別にもうちょっと違う数値でもかまいません。

#wrapの指定方法ですが、この場合bodyの子要素として指定する必要性は特にないかと。bodyの子要素なのは明らかなので。
ただしこの方法は、画面いっぱいに配置するほかに、
特定のボックス内のdivの高さをあわせるのにも使えるので、そういう場合にはセレクタ指定が有効です。

paddingとmarginの0は無くても大丈夫です。一応つけてます。無い場合は!importantを外してください。

#wrapなしでbodyに同じように記述した場合は上手く表示されません。
親要素のhtmlは画面表示に関わるわけではないからだと思います。

なのでこのような入れ子で指定することになるかと。

要するに画面表示できるいっぱいまでパッディングを取って、
画面外に行っちゃったコンテンツを同じ幅のマージンで元の位置に戻してるだけです。
1回描画を試みているので高さがちゃんと計算されるようです。
ただそのままだと画面のはるか下まで下限が行ってしまうので、
#wrapでオーバーフロー分を非表示にしてます。
ちゃんとコンテンツに追随しますので確認してみてください。

ちなみにこれ何してたのかというと、
ヘッダー・コンテンツ・フッターの順で表示させたとき、
メインのコンテンツが内容が薄くてフッターが真ん中くらいに来るのを回避して、
フッターを画面下か、コンテンツの高さが画面より広い場合はそちらに合わせる、
という指定をしていたときの作業の途中でした。
多分次忘れてると思うので。