アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

CSSでheightにパーセンテージを使えなくて困った話

CSS初心者は毎日色々困っています。

諸々のサイズ指定をするのに、
とりあえずわかりやすくパーセンテージ指定をしたいことが結構あるのですが
効くときと効かないときがある。

どういうことかと思って調べてたらたぶんこれだ…。

CSSでheight:100%を使う方法について。 | Ginpen.com

html要素とbody要素にheight:100%を指定

html, body {
  height: 100%;
}

親である要素のサイズが指定されていないとパーセンテージが使えないらしいので、
htmlやbodyを100%にしてしまえばOK、ということらしい。

長時間というか長期間?ハマってたのがやっと解決した…。
(めちゃくちゃ初歩的っぽい空気を感じる)

追記:vhやvwというものもある

サイズ指定の単位なんて、pxと%とせいぜいフォントのptくらいしか知らなかったんですが、
何やらvhやらvwやらというのがあるらしい。
ブラウザの表示領域に対する割合だそうで、100vhが高さいっぱい、100vwが幅いっぱい。
つまり

<div class="div1" style="height: 50vh; width: 100vw;"></div>

とやってやれば、画面の半分くらいの高さ&幅いっぱいのdivが作れる。
用途によってはこれも使えそう。