CSS レイアウト

%（パーセント）

親要素のサイズが100%としたとき子要素のサイズを親要素に対して何%で設定するか？を決められる指定方法。
※注意点
%（パーセント）のサイズ指定は親要素に依存する。
親要素であるbody要素はブロックレベル要素のため、高さを厳密に指定していないとボックスとして形を保つことができない。
そのため、height 100%と指定した場合、ブロックが消えてしまう。
対策として%指定が適応されるように、親要素を追加して高さを指定する。

vh（viewport height）

vh（viewport height）は、viewportの高さ（height）に対する割合のことを指す。
1vhと指定した場合は、ブラウザで表示されているの高さの1%。

vw（viewport width）

vw（viewport width）は、viewportの幅（width）に対する割合のことを指す。
1vwと指定した場合は、ブラウザで表示されているの幅の1%。

%とViewportの違い

・%（パーセント）は、親要素に依存する
・viewport（ビューポート）は、ブラウザの表示されている領域に依存する

%とViewportの使い分け

・要素をページの高さいっぱいに配置する場合は、100vhを使う
・要素のページの横幅いっぱいに配置する場合は、100%を使う

calc関数

CSSで四則演算（+,-,*,/）を行うことができる。
calc()の括弧内に値を渡すことで計算結果を返してくれる。
例）全体の高さから300px分を引いたサイズを指定

.hoge {
    width: calc(100vh - 300px); 
    => 全体の高さが、1000pxだった場合hogeのwidthは700pxになる
}