ブロックレベル要素の高さを揃える

10月25日（木）13:25

category: CSSテンプレート, ビジュアル・小技

1日に2エントリーもするなんて、、、

[CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。

---- こっから続き

この方法のポイントになっている部分が、#mainとかカラムの親要素にoverflow: hidden;を指定して、各カラムには、以下のようにpadding-bottomプロパティとmargin-bottomプロパティを指定してる。

	padding-bottom: 32768px;
	margin-bottom: -32768px;

padding-bottomプロパティでおもいっきり下まで下げてから、同じ値のマイナス値をmargin-bottomプロパティで指定して、overflowプロパティで切り取ってる？

値の「32768px」ってのは、軽く調べた限りIEの限界っぽい。
ぷろぐらむの関係なんだろーってのは分かるけど、突っ込んだトコロはボクにはさっぱり分かりません。
256*128=32768って数字なの？
32bitマシンのメモリが4Gくらいから数値上認識しないとか、ファミコン時代のRPGのステータスが255で止まるとか。
そーゆー系でIEは、そういう仕様になっているのかしら。
よー分からないけど、その辺はプログラマさんたちにお任せ。

1pxでも増やすとIEでは領域が潰れていく。
単位も「px」以外だとダメだった。

他のブラウザでは、90000pxとかにしても問題なかったけど、IEが限界を設定しているなら、コレってブラウザに負荷が掛かったりしないのかしら。。。
背景画像とか繰り返し指定したら、その分レンダリングしよーとしちゃうよね。
他に、overflow: hidden;がきいてなかったら当然すっごい事になっちゃうとかも考えられる。

また、見えてないだけでpadding-bottomプロパティで下辺の余白が思いっきり確保されてる訳だから、border-bottomプロパティでの指定は見えなくり、backgroundプロパティは位置をbottomで指定すると同様に見えない位置に。
この辺りは当然ってば当然か。

背景の繰り返しに関しては最初に、はまりやすいポイントの一つとは思うけど、この方法を薦めて良いのかは謎い。
ただ親要素に繰り返し用の背景画像作ったりするより圧倒的に楽だし、JSとかで制御するよりはいいのかな。

ブラウザの負荷とかコレによって発生する問題が有るかどうかってトコロでしょうか。

ところでコレってば、もとの記事がスペイン語？か何かだから全然読めないっていう・・・
metal.ize ≫ Blog Archive ≫ Columnas 100% altas

まーきっと詳しい人がその内色々調べてくれるだろうから、待っていようっと。

各種SBMに追加