高さを画面いっぱいにする方法とheight:100%が効かないワケを解説します。要素を画面いっぱいにしたいのにちょっと内側になってる!body直下じゃない要素の幅を画面いっぱいにしたい!横幅(width)を画面いっぱいにする方法を解説します。横並びしている要素の高さがばらついているから親要素の高さに合わせたい!CSSで子要素の高さを親に合わせる方法を解説します。【まとめ】CSSで高さを画面いっぱいにする方法height:100vhを指定するCSSで高さを画面いっぱいにするには「height:100vh」を指定しましょう。height:100vhのデモはこちらスマホで確認するならQRコードから縦にスクロールして動きを確認してみてください。100vh」を指定しています。</html>heightは要素の高さを指定するCSSです。「vh」はブラウザの表示域を基準にする単位です。100vhがブラウザの高さであり、1vhはその100分の1となります。height:100vhのメリットは親要素に影響されないことです。後述しますが「%」の指定では親要素を基準とした高さになるため、内容量によって変わったり先祖要素すべてhight:100%をしなくてはいけません。height:100vhなら親要素の高さを気にせず指定できます。border-boxも指定するheightやwidthはpadding、borderの大きさを除いたサイズとなっています。はみ出してしまいます。border-box」も指定しましょう。border-box」を指定するとheightやwidthはpadding、borderの大きさを含んだサイズになります。スマホではURLバーに注意スマホではブラウザ上部にURLバーが出てきます。height:100vhの指定ではこのURLバーの分、下に押し出されてしまいます。よって下部が画面からはみ出してしまいます。縦にスライドしURLバーが残っているとき、上部が隠れてしまいます。縦にスライドしたとき、URLバーが隠れる場合があります。そのときは上部も下部も表示され、100vhで問題ありません。この問題を許容できるならvhでよし、許容できないなら後述する「jQueryを使う」方法にしましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むjQueryを使うjQueryを使うことでURLバーを除いた高さを指定することができます。jQueryを使ったデモはこちらスマホで確認するならQRコードから縦にスクロールできるようにしています。URLバーの動きを見てみてください。スマホで縦にスクロールしたとき、URLバーの高さ分だけ高さが足りなくなります。src="https://code.jquery.com/jquery.min.js"></script>ここではjqueryのコードを外部から読み込んでいます。jqueryを使う場合必須です。他のjqueryは別ファイルに書いて呼び出すか、<script></script>内に記述しましょう。$('.example').outerHeight($(window).height());});ここではページが開かれたときに「class="example"」の高さをブラウザの高さに合わせるように指定しています。$('.example').outerHeight(winH);});ここではウィンドウサイズが変わったときに「class="example"」の高さをブラウザの高さに合わせるように指定しています。height:100%が効かないワケ画面いっぱいの高さにするなら「height:100%」でいきそうなものですが、そう簡単にはいきません。【CSS】height:100%やautoが効かない理由height:100%やautoにしても高さいっぱいにならないのなんで?高さが0になってるのなんで?height:100%やautoが効かなかったり、高さが0になる理由を解説します。この記事を読む親要素が画面いっぱいである必要があるheightにおいて%指定した場合、親要素の高さを基準に高さが決まります。親の高さが100pxのときにheight:100%を指定するとheight:100pxになるわけです。いうことは親要素が画面いっぱいである必要があります。親がheight:autoなら子のheight:○%は効かない兄弟要素の内容量のおかげで親の高さがブラウザの高さになったとしましょう。この状態でheight:100%を指定すると親と同じ高さになりそうなものですが、なりません。親がheight:autoなら子のheightの%指定は効かないのです。いうことは親要素にauto以外のheightを指定する必要があります。height:autoとwidth:autoは違うheightの初期値はautoです。ブロック要素におけるwidth:autoは横幅いっぱいになりますよね。その考えで行くとheightも縦幅いっぱいになりそうなものですが、実際は内容の高さに応じて最小の高さになります。よってheight:autoでは高さがいっぱいになりません。先の親要素の指定もあり、親の親も含め先祖要素すべて「height:100%」を指定する必要があります。htmlとbodyは画面いっぱいではないhtmlをつくるとき、htmlとbodyタグが外側を囲っていますよね。実はこの2つのタグにも高さがあります。その高さは指定しない場合、初期値である「height:auto」です。htmlやbodyはサイト全体を囲っているため画面いっぱいの高さのように感じがちですが実はそんなことありません。!この2つのタグにも「height:100%」を指定する必要があります。100%」にしましょう。スマホにて縦にスクロールするとわかりますが、こちらの高さはURLバーを除いた高さです。100vhとは少し違いますね。【オススメ】height:100vh100vhはブラウザの縦幅と同じ大きさです。スマホではURLバーを含んだ高さになります。【URLバーが気になるなら】jQueryを使う下記のようにjQueryを指定しましょう。$('.example').outerHeight(winH);});スマホではURLバーを除いた高さになります。100%」にしましょう。スマホではURLバーを除いた高さになります。以上、CSSで高さを画面いっぱいにする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。