【CSS】デバイスに依存せずに背景をページいっぱいに表示する
以下の条件を満たす高さ指定がしたくていろいろと試していたのですが、その解決方法が見つかった（というか、とても初歩的なポイントでした）のでシェアします。
①背景をページいっぱいに表示したい
②デバイスに依存しない
③子要素の高さがない
「子要素の高さがない」ってどんな状況？
いきなりいわれても状況がイメージできないとおもうので、具体的なコードをおいておきます（見やすさ重視でhead内にcssを記述しています）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type=”text/css”>
#container{
background-color:rgb(224, 248, 255);
position:relative;
}
.contents{
height:100px;
left:50%;
position:fixed;
top:50%;
width:100px;
}
</style>
</head>
<body>
<div id="container">
<div class="contents"></div>
</div>
</body>
</html>#containerをページいっぱいに表示して背景色を設定したいのですが、子要素である.contentsにposition:fixed（absoluteでも同様）が適用されています。こういった場合、親要素である#containerは高さを失ってしまいますよね。
これを解決するためには、bodyもしくは#containerにheightを指定してあげる必要があります。通常であれば、以下のようにすればOK。
<style type=”text/css”>
#container{
/* ケースA */
height:100%;
/* ケースB */
height:500px;
}
</style>しかし、これでははじめにあげた①〜③の条件をクリアできません。
子要素に高さがあればケースAで解決できますが、今回のようにposition指定されていると高さが0になってしまいます。
また、ケースBを使えば背景は設定できますが、閲覧するデバイスによって見切れたり、無駄なスクロールが発生したりしてしまいます。
結論：ビューポートを用いて高さを指定する
結論からいうと、ビューポートで高さを指定することで、①〜③の条件をクリアすることができました。
<style type=”text/css”>
#container{
height:100vh;
width:500vw;
}
</style>ビューポートというのは「画面の幅と高さ」のこと。単位は100分の1なので、今回は100vh（画面の高さ100%）, 100vw（画面の幅100%）として指定しています。
これらは画面の幅に応じて計算されるので、このような指定をしておけば、PCでもスマホでもタブレットでも、画面いっぱいに背景を指定することができます。
『%』と似たような単位ですが、『%』は親要素の大きさが基準になるため、今回のように「親要素の高さがない」という場合にはいくら100%や1000%にしても高さは0のままになってしまうのです。
いちおうこれだけの話なのですが、せっかくなので試したこととその結果を書いておきます。
JavaScriptでページの読み込み時に動的にウィンドウの高さを取得する
『%』も『px』も使えない（もちろん『em/rem』もダメ）となったとき、まず考えたのが「ページの読み込み時に動的に高さを取得すればいいじゃん」という考え。
JavaScriptをもちいて、以下のようなコードを書きました。jQueryのほうがスマートにかけますが、ネイティブなJavaScriptを習得したくてJSで書いてます。
window.addEventListener('load', function(){
const container = document.getElementById('container');
container.style.height = window.innerHeight + 'px';
});やっていることは単純で、ページの読み込みのときにウィンドウの高さ（window.innerHeight）を取得して、それを#containerのheightに指定する、というもの。
これにはひとつ問題があって、読み込んだあとにブラウザを広げたり縮めたりすると、見切れたり高さが足りなくなったりしてしまいました。
ほか、高さをinnerHeihtではなくouterHeightで取得したり、heightではなくminheightなどで指定したりしましたが、どれもうまく行かず。
そもそも「画面いっぱいに背景を表示」をいうシンプルな課題にたいしてJavaScriptを使うアプローチはちょっと過剰というか、気持ち悪い感じがします。
そうこうしているうちに、先ほどのビューポートにたどり着きました。めでたし。（というかビューポートの存在については知っていたのに、スラスラ出てこなかったのが不思議）
あまりにも初歩的な内容となってしまいましたが、同じようにつまづいている初学者の参考になれば嬉しいです。ではでは。
この記事が気に入ったらサポートをしてみませんか？