Tanweb.net

PC・デジモノ・旅行など好きなことだけ語るブログ

CSSの小技 – ボックスのhightを100%にする方法

CSSの小技 – ボックスのhightを100%にする方法

Sponsor link

      2017/04/21
 サイト制作

      2017/04/21
 サイト制作

midashi-web

ウェブページを作っているとたまにボックスの縦(hight)を目一杯伸ばしたいことってないですか?僕はあります。その時に「hight:100%」と指定しても100%にならないどことかその指定は無視されてしまいます。

そこで今回は「ボックスの高さhightを100%にする方法」を紹介します。

CSSサンプル

ボックスの縦幅を100%に指定するには以下のCSSを記述する。

body と html にそれぞれ「hight:100%」を指定します。

その後、縦を目一杯伸ばしたいボックスに対して個別に「hight:100%」を指定してあげると不思議なことにボックス縦幅が100%が効くようになります。

多分たまにしか使わない小技だと思いますが、いざ使うときに「どうやるんだっけ?」と思ったら本記事を思い出していただければ幸いです。