ホームへ

CSSで高さを画面いっぱいにする方法【height:100%が効かないワケ】

「スマホで画面いっぱいのメニューを作りたい」

「一画面で完結するWebシステムを作りたい」

「高さを画面いっぱいにしたいのに方法がよくわからない!height:100%じゃ効かない!」

CSSで高さを画面いっぱいにする方法とheight:100%が効かないワケを解説します。

height:100vhを指定する

CSSで高さを画面いっぱいにするには「height:100vh」を指定しましょう。

height:100vhのデモはこちら

スマホで確認するならQRコードから

縦にスクロールして動きを確認してみてください。

<!DOCTYPE html>
<html>
    
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="https://csshtml.work/wp-content/themes/csshtml/style.css" rel="stylesheet" type="text/css">
<style>
.example{
    height: 100vh;
    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:10pxを指定するとpaddingの分 はみ出してしまいます。

これを避けるため「box-sizing: border-box」も指定しましょう。

「box-sizing: border-box」を指定するとheightやwidthはpadding、borderの大きさを含んだサイズになります。

スマホではURLバーに注意

スマホではブラウザ上部にURLバーが出てきます。

height:100vhの指定ではこのURLバーの分、下に押し出されてしまいます。

よって下部が画面からはみ出してしまいます。

縦にスライドしURLバーが残っているとき、上部が隠れてしまいます。

縦にスライドしたとき、URLバーが隠れる場合があります。そのときは上部も下部も表示され、100vhで問題ありません。

この問題を許容できるならvhでよし、許容できないなら後述する「jQueryを使う」方法にしましょう。

jQueryを使う

jQueryを使うことでURLバーを除いた高さを指定することができます。

jQueryを使ったデモはこちら

スマホで確認するならQRコードから

縦にスクロールできるようにしています。URLバーの動きを見てみてください。

スマホで縦にスクロールしたとき、URLバーの高さ分だけ高さが足りなくなります

<!DOCTYPE html>
<html>
    
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="https://csshtml.work/wp-content/themes/csshtml/style.css" rel="stylesheet" type="text/css">
<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>
.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>
<link href="https://csshtml.work/wp-content/themes/csshtml/style.css" rel="stylesheet" type="text/css">
<style>
.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で高さを画面いっぱいにする方法とheight:100%が効かないワケでした。

マンガで読める関連記事