高さを求めて32767px
CSS昔話 Advent Calendar 2015の3日目の記事です。
32767pxといえば、もうお気づきの方もいるかもしれません。
そう、32767pxといえば、2007年頃に広まった要素の高さをそろえるテクニック（？）の中に登場する数値ですね。
floatした要素の高さを揃えたい！
例えば、幅が200pxの要素.boxが3つ横に並んでいるとします。それぞれの要素はfloat:left;と背景色が指定され、中身は要素ごとに異なります。
See the Pen bEbQZV by geckotang (@geckotang) on CodePen.
HTMLとCSSを見てみます。まずはHTMLからです。これといって変わったことはしていません。
The quick brown fox jumps
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
次に、CSSです。floatさせてるので、親でclearfixを使っています。
/* CSS */
.container {
width: 600px;
border: 3px solid gray;
}
.container::after {
content: "";
clear: both;
display: block;
}
.box {
float: left;
width: 200px;
}
.box--type-1 {
background-color: tomato;
}
.box--type-2 {
background-color: limegreen;
}
.box--type-3 {
background-color: gold;
}
こうした時に、.boxはfloatしているため、高さが内容量によってことなるため、高さがバラバラです。
高さがバラバラなものを見ると、どうして人類は高さを揃えたくなるのか。
floatした要素の高さをそろえるために、開発されたテクニックが、floatしている要素に、padding-bottom: 32767px;とmargin-bottom: -32767px;を指定し、その親要素にoverflow:hidden;を指定するといったものでした。
See the Pen bEbQPE by geckotang (@geckotang) on CodePen.
CSSで変更した箇所は以下の部分です。
/* CSS */
.container {
width: 600px;
border: 3px solid gray;
overflow: hidden;
}
/* 省略 */
.box {
float: left;
width: 200px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/* 省略 */
要は、.boxのpadding-bottom:32767px;という巨大な数値を指定し、(内容量+32767)pxの高さを持った要素にします。そして、margin-bottom: -32767px;で、その32767pxをネガティブマージンすることで、見た目はでかいけど高さはコンテンツ分しかない。という何かが作れます。
そのままだと、塗りの部分が親要素をはみ出てしまうので、親要素にoverflow: hidden;を使用して、はみ出た部分が見えないようにします。
なぜ、32767という数値なのか。ということについては、Wikipediaの16ビットのページにあります。
16ビット整数は216(または 65536)種類の値を保存することができる。符号なしの表現では、0 から 65535 までの整数値となる。2の補数の表現では、-32768 から 32767 までとなる。したがって、16ビットメモリアドレスを使用するプロセッサは、64KiB のバイトアドレスメモリを直接アクセスできる（アドレス空間が64Kバイトである）。
引用元：「16ビット - Wikipedia」より
その16ビットの最大値が、当時のSafariが認識できる数値の最大値だったから。のようです。
そして、このテクニックは主に、画面いっぱいの高さで3カラムなどを表現するために使われ、主に「画面いっぱいの高さになる3カラム」などを表現するために使われました。
See the Pen XXrodq by geckotang (@geckotang) on CodePen.
指定出来るだけの巨大な数値（32767px）を指定しておけば、どんなにウィンドウが高くなってもそれを超えることはないだろう。ということなのでしょう。
z-indexの最大値もそうですが、どんな数値にも理由があるものですね。
最後に
当時は、「とりあえず指定しておけばオッケー☆」という魔法として紹介される感じでした。魔法というか黒魔術的な感じでしょうか。
その後は、いろいろな要件に応えるために高さを揃えるJavaScriptライブラリが登場したりもしました。幸せなことに、最近（？）では、display: table-cell;やdisplay: flex;を使えば、隣接する要素の高さをそろえることが簡単にできるようになってきました。
人類はいつまで高さをそろえ続けるのだろうか。高さ揃えと人類の戦いは始まったばかりだ！高さ揃え先生の次回作にご期待ください！（完）
CSS昔話 Advent Calendar 2015の4日目は、越智さんです。よろしくお願いします。
