スマホ、CSSだけで、ブロックの高さを決める方法

※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

こんちは。

会社の昼休みです。
北海道は、この11月なのに雨が連日降ってます。
異常気象・・・。

さて、表題いってみよう。

スマホの利用者が増えている昨今。
コーダーも、一つの案件でサイトをほぼ二つ作るような感覚だ。
であるからして、スマホ特有のコーディングテクニックみたいのが必要になってくる。

その中で、一つやっかいなのは、"ブロックの高さ"の問題。
ブロック内要素によって、高さが決まるなら特に問題はないが、
中身が、position: absolute、だったりしたら、親ブロックの高さは少々やっかい。

CSSのメディアクエリーで指定する？
JavaScriptでCSSを変える？
むしろ、jQueryで後付けする？

ぶっちゃけ、どれも微妙・・・。
メディアクエリーだと、指定するデバイスに限りがある。
JSだと、読み込みスピードによってはやっぱり調整前が出てしまうし、だいたいにおいて書くのもめんどう。

CSSだけでできないだろうか・・・？

はい、できます！
（youtubeのあの広告風に）

.wrapperBlock {
 padding: 60% 0 0;
 position: relative;
 overflow: hidden;
}

.wrapperBlock .childrenBlock {
 position: absolute;
}

そう、paddingで指定するのだよワトソン君！
中身は、absoluteだから、paddingが地球より大きい値でも大丈夫だ、問題ない。
（いや、PC殺す気か）

知ってる人は知ってると思うが、この、
marginとpadding、%値を指定すると、ページの横幅から値を算出する。
つまり、デバイス横幅が、320px（iPhone 4～5S、など）の時60%と指定すると、
192pxになってくれるわけ。 縦margin、paddingでも同じく横幅から算出する。
これは、Webページが、縦に伸びる性質を持つので、どんな高さになっても、値が変動しないように、との仕様だろう。
PCはウィンドウ幅変えれるけど、スマホは基本的には変わらない。
（横にしなくても見やすいように工夫するしね）

これが、height値だとそうはいかず、heightで%指定すると、
そのページ全体から（厳密にいえば親ブロックの大きさから）算出するので、ページの高さが変わると当然値も変わってしまう。

このテクニックを使えば、全デバイスによってイーブンの高さを指定することができるってわけ。
既にやってる人はいるかもしらんが、 思いついた時、俺天才、どやぁ・・・でした。

さて、メシ食いに行くか・・・・。