【html/CSS】高さ(height)を画面いっぱいにする方法
「スマホで画面いっぱいのメニューを作りたい」
「一画面で完結するWebシステムを作りたい」
「高さを画面いっぱいにしたいのに方法がよくわからない！height:100%じゃ効かない！」
高さを画面いっぱいにする方法とheight:100%が効かないワケを解説します。
横幅(width)を画面いっぱいにする場合はこちら
子要素の高さを親要素に合わせる方法はこちら↓
目次
height:100vhを指定する
CSSで高さを画面いっぱいにするには「height:100vh」を指定しましょう。
スマホで確認するならQRコードから
縦にスクロールして動きを確認してみてください。
デモページのソースは下記のようになっており、bodyに背景色をつけているわけではなくdivに背景色をつけ、「height: 100vh」を指定しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
body{
margin: 0;
}
.example{
height: 100vh;
box-sizing: border-box;
padding: 20px;
background: #bfcfea;
}
</style>
</head>
<body>
<div class="example">height: 100vh</div>
</body>
</html>
heightは要素の高さを指定するCSSです。
問題は単位です。
「vh」はブラウザの表示域を基準にする単位です。100vhがブラウザの高さであり、1vhはその100分の1となります。
height:100vhのメリットは親要素に影響されないことです。
後述しますが「%」の指定では親要素を基準とした高さになるため、内容量によって変わったり先祖要素すべてhight:100%をしなくてはいけません。
height:100vhなら親要素の高さを気にせず指定できます。
box-sizing: border-boxも指定する
heightやwidthはpadding、borderの大きさを除いたサイズとなっています。
height:100vhと指定してもpadding:20pxを指定するとpaddingの分 はみ出してしまいます。
これを避けるため「box-sizing: border-box」も指定しましょう。
「box-sizing: border-box」を指定するとheightやwidthはpadding、borderの大きさを含んだサイズになります。
スマホではURLバーに注意
スマホではブラウザ上部にURLバーが出てきます。
height:100vhの指定ではこのURLバーの分、下に押し出されてしまいます。
よって下部が画面からはみ出してしまいます。
縦にスライドしURLバーが残っているとき、上部が隠れてしまいます。
縦にスライドしたとき、URLバーが隠れる場合があります。そのときは上部も下部も表示され、100vhで問題ありません。
この問題を許容できるならvhでよし、許容できないなら後述する「jQueryを使う」方法にしましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
jQueryを使う
jQueryを使うことでURLバーを除いた高さを指定することができます。
スマホで確認するならQRコードから
縦にスクロールできるようにしています。URLバーの動きを見てみてください。
スマホで縦にスクロールしたとき、URLバーの高さ分だけ高さが足りなくなります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$('.example').outerHeight($(window).height());
});
$(window).on('resize',function(){
winH = $(window).height();
$('.example').outerHeight(winH);
});
</script>
<style>
body{
margin: 0;
}
.example{
box-sizing: border-box;
padding: 20px;
background: #bfeac1;
}
.parent{
height: 1000px;
background: #618400;
}
</style>
</head>
<body>
<div class="parent">
<div class="example">jQuery</div>
親要素
</div>
</body>
</html>
jQueryの解説
<script src="https://code.jquery.com/jquery.min.js"></script>ここではjqueryのコードを外部から読み込んでいます。jqueryを使う場合必須です。
他のjqueryは別ファイルに書いて呼び出すか、<script></script>内に記述しましょう。
$(function() {
$('.example').outerHeight($(window).height());
});ここではページが開かれたときに「class="example"」の高さをブラウザの高さに合わせるように指定しています。
$(window).on('resize',function(){
winH = $(window).height();
$('.example').outerHeight(winH);
});ここではウィンドウサイズが変わったときに「class="example"」の高さをブラウザの高さに合わせるように指定しています。
height:100%が効かないワケ
画面いっぱいの高さにするなら「height:100%」でいきそうなものですが、そう簡単にはいきません。
親要素が画面いっぱいである必要がある
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%」を指定する必要があります。
height:100%で画面いっぱいにする方法
上記をふまえてheight:100%で画面いっぱいにしたデモがこちら
スマホで確認するならQRコードから
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
body{
margin: 0;
}
.example{
height: 100%;
box-sizing: border-box;
padding: 20px;
background: #ead8bf;
}
html,body,body>div{
height: 100%;
}
</style>
</head>
<body>
<div>
<div class="example">height: 100%</div>
</div>
<div style="height: 1000px;">高さがあるとき</div>
</body>
</html>
高さを画面いっぱいにしたい要素の先祖要素すべて（html、body含む）を「height: 100%」にしましょう。
スマホにて縦にスクロールするとわかりますが、こちらの高さはURLバーを除いた高さです。
100vhとは少し違いますね。
【まとめ】CSSで高さを画面いっぱいにする方法
【オススメ】height:100vh
100vhはブラウザの縦幅と同じ大きさです。
スマホではURLバーを含んだ高さになります。
【URLバーが気になるなら】jQueryを使う
下記のようにjQueryを指定しましょう。
$(function() {
$('.example').outerHeight($(window).height());
});
$(window).on('resize',function(){
winH = $(window).height();
$('.example').outerHeight(winH);
});スマホではURLバーを除いた高さになります。
height:100%
高さを画面いっぱいにしたい要素の先祖要素すべて（html、body含む）を「height: 100%」にしましょう。
スマホではURLバーを除いた高さになります。
以上、CSSで高さを画面いっぱいにする方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
