高さ 100% の CSS の注意事項

ども、@kimihom です。

f:id:cevid_cpp:20190615233506j:plain

今回、高さ100%の CSS 、つまりスクロールできない縦幅いっぱいの HTML を構築して新しい知見が溜まったので、注意事項としていくつかピックアップしようと思う。

calc を使いこなせ

スクロールしない高さいっぱいの CSS は実装してみるとわかるけど、意外と簡単にすぐスクロールが発生してしまう。それは、表示された全ての HTML が padding, margin, height など全てを正しく実装しないと幅を超えてしまうからだ。

CSS には calc っていう単位の違う大きさをうまく計算してくれる方法がある。これを使うことで、それぞれ理想の高さを保ちながら、高さ100% キープを実現できる。

f:id:cevid_cpp:20190615230100p:plain

上記のような、ごくごくありがちなスタイルを高さ 100% で実現するとしよう。この場合、ヘッダには大抵画像が用意されることになるが、この画像を%で指定すると画像が崩れたりするので固定したいってのはよくある話だろう。そこで、ヘッダは固定しつつ、その下のエリアを柔軟に高さが変わるように実装してみよう。

.header {
  height: 60px;
}

.container {
  height: calc(100% - 60px);
}

ん〜いい感じだ。これでウィンドウの高さを自由に動かしても container の高さは最大値をキープしてくれる。もちろんこの calc, CSS3 の一つなんだけど、今ではほとんどのブラウザが対応しているので問題なく使えるだろう。

clearfix を使わない

float: left をしてラッパーに .clearfix をかます。これは今でも便利に使われている CSS のレイアウトテクニックの一つだろう。最初、私もさっと clearfix で対応していたのだけど、どうしても高さが 100% を超えてしまってスクロールが発生してしまっていた。まさかこの clearfix が問題の原因だったとはね。

というのもこの clearfix, 地味に下に margin が生まれてしまうのである。先ほどのキャプチャを clearfix でやるとこんな感じだろう。

.container {
  // clearfix
}
.main {
  float: left;
  width: 80%;
  height: 100%;
}
.side {
  float: left;
  width: 20%;
  height: 100%;
}

これで 100% で問題ないはずなのにどうしてもスクロールが発生しちゃうから、仕方なく95% とかにするっていう諦めも可能ではある。ただ、せっかくならしっかりと高さ 100% で埋めたいよね。そこで、もう読者はご存知であろう Flexbox の登場である。

.container {
  display: flex;
}
.main {
  width: 100%;
  height: 100%;
}
.side {
  width: 300px;
  height: 100%;
}

Flexbox を使うと、下に無駄な margn が発生せずに、綺麗に height 100% を記すことができる。また、side の width もうまく固定できるメリットもある。

文字数を考慮しよう

高さ 100% に絶対に収めなければならない。私たちはその宿命にあっている。そんな中、ユーザーはきっと好きなように文字を大量に入力することだろう。それによって、意図も簡単に「改行」が生まれてしまう。この改行は高さ 100% を課したページにおいて厄介な存在の一つだ。

対応方法としてはパッと2つ出てくる。

1. スクロールさせる 例えば、サイドバーがチャットエリアの場合、うまくスクロールできるようにする形となるだろう。overflow と height を指定すればいいだけだ。

.side {
  overflow: auto;
}

2. "..." で省略させる 例えばヘッダに何らかのタイトルを出したいって場合、タイトルが300文字以上で改行されてしまうケースが出てくる。こういったときは確実に1行に収まるように 1行超えそうになったら「...」で省略する CSS を実装できる。

.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

この3つの CSS オプションが大事なコンビネーションである。これで、意図しない改行を防ぐことが可能だ。

box-sizing を活用しよう

高さ 100% を超えてしまいがちな理由の他の要因として padding によって高さを超えてしまうってのがある。 NG パターンは以下のようなケースである。

height: 100%;
padding: 28px 0;
border: 2px solid black;

これで意図も簡単に、高さ100%を超えてしまうのである。padding や border は height とは関係なく外に出てしまうのである。さて、そんな時に便利なオプションが box-sizing だ。なんと、さっきの CSS に box-sizing: border-box; を追加するだけで、全てを包み込んだ上での height: 100% にしてくれるなんとも便利なオプションである。

display: none か visibility: hidden か

display: none は CSS で非表示にするのによくある手段ではあるが、 visibility: hidden ってのも考慮に入れよう。 display: none だと高さも完全に消えてしまうため、その HTML を display: block にした途端に高さ 100% を超えてしまう悲劇が生まれなかねない。その反面、visiblity: hiddenは高さを入れたまま非表示にするオプションなのでその心配がない。ちなみに hidden の反対は visible だ。