ボックスの幅をブラウザの幅にあわせるのは、親要素に幅を指定していなければ「width:100%」も必要ありません。親要素の幅に合わせて100％に勝手になります。
問題は高さです。高さは内包している要素の高さになりますので、「height:100%」としただけではブラウザの高さに合わせられません。
そこで今回はボックスの高さをブラウザの高さに合わせるテクを3つやっていきます。
はじめに
冒頭で『「height:100%」としただけではブラウザの高さに合わせられません。』と書きましたのでサンプルで確認しましょう。
HTML
<div class="box">
このボックスの高さをブラウザの高さに合わせたい
</div>
CSS
.box{
background: #ccc;
height: 100%;
padding: 20px;
}
というわけで、これではブラウザの高さなりません。
ではどうやるか？ということで下記の方法があります。
height:100%でやる
「height:100%」ではできないって言ったじゃん！と思うかとしれないですが、それだけではダメなんですが、実は親要素にも「height:100%」を指定することで実現できます。
親要素とは「html」と「body」です。「body」だけでいい気がしますがどちらが欠けてもフィットしません。
html,body{
height: 100%;
}
.box{
background: #ccc;
height: 100%;
padding: 20px;
}
できましたね。
私はこの方法は使わないので、この記事をアップする過程で知った次第です。
jQueryでやる
jQueryでやっているサイト多いと思います。サンプルで見てましょう。
HTML、CSSは基本同じです。CSSの「height:100%」はなしにしました。
jQuery
$('.box').css({'height':$(window).height()});
と書くか、
$('.box').outerHeight($(window).height());
でもオッケーです。「padding」を指定している場合は「height」ではなく「outerHeight」でないと画面の高さより、「padding」の値の分出てしまうので注意です。
また、ブラウザのサイズが途中で変わった場合にも適用させるために下記を追加します。
$(window).on('resize',function(){
winH = $(window).height();
$('.box').outerHeight(winH);
});
これでユーザーがブラウザサイズを変更しても常にブラウザの高さになります。
vhでやる
CSSには「vh」という単位があります。もちろん「vw」もあります。
「vh」は「viewport height」の略です。
ブラウザの高さが1000pxなら「1vh」で1%の10pxになり、
「100vh」で100％＝ブラウザの高さになります。
やってみましょう。
CSS
.box{
background: #ccc;
height: 100vh;
padding: 20px;
}
できました。
サンプル1で確認のとおり、「height:100%」では親要素にも「height:100%」を指定しないとできませんでしたが、「height:100vh」なら簡単にできました。
「vh」は親要素を基準とするのではなく、「viewport」を基準とするためです。
ただ、IEでは「vmax」をサポートしていなかったり、Androidが「4.4」以降のサポートだったりと使うにはまだ懸念材料があります。（※2017.11月時点）
サンプルがあまりにも手抜きなので最後に少しだけ手を加えたサンプルを1つ
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
