vhについて
参考記事：
https://qiita.com/sanriyochan/items/be55bc9f544422d8456c
②使用したreset css
https://meyerweb.com/eric/tools/css/reset/
htmlとcssを使用して、こんな画面を作りたい。
まずは、htmlで骨格を作ります(<head>タグ内で、vh.cssとreset.cssを読み込んでいます)。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
次に、vh.cssを編集します。
.wrapper {
height: 100vh;
}
.top {
height: 100px;
background-color: lavender;
}
.bottom {
height: calc(100% - 100px);
background-color: royalblue;
}
さて、ここで登場した100vhとは何でしょうか。
これは、ブラウザの表示領域に対する割合が100%ということです。
つまり、「画面いっぱいの高さだよ〜」ということです。
100%は、親要素に対する割合です。
bottomの親は、wrapperです。
wrapperの高さは、100vh・・・つまり、画面いっぱいの高さです。
topの高さは、100pxです。
bottomの高さは、calc(100% - 100px)・・・つまり、親要素であるwrapperの高さ全体からtopの高さを引いた値です。
calcで計算が可能です。
値と - の間に半角スペースがあることに注意してください。
以上。
