CSSの％とvh、vwの違い

viewport

ブラウザで表示されている領域です。vhとvmがあります。
vhは高さでvwは幅です。

vh

1vhと指定した場合は、ブラウザで表示される高さは1%です。つまり、ブラウザで表示されている高さが、1000pxなら 10vhだったら100pxとなります。

vw

1vwと指定した場合は、ブラウザで表示される幅は1%です。つまりブラウザで表示されている高さが、1200pxなら 10vwだったら120pxとなります。

%とViewportの違い

%（パーセント）は、親要素に依存します。
viewport（vh、vm)は、ブラウザの表示されている領域に依存します。
要素をページの高さいっぱいに配置する場合は、100vhを使い、要素のページの横幅いっぱいに配置する場合は、100%を使うのが多いです。

calc関数

CSSで四則演算（+,-,*,/）を行うことができます。
【例】

.top {
    width: calc(100vh - 300px);
}
```
全体の高さが、1000pxだった場合.topのwidthは700pxとなります。使うメリットとしては異なる単位同士での計算が可能になります。
【例】

```
/* wrapperは親要素とします */
.wrapper {
  background-color: #d9ead3;
  height: 700px;
  width: 100%;
  display: flex;
}

div {
    width: calc(100% / 3);
}
/* 以下のセレクタは.wrapperの子要素です */
.left {
    background-color: #c9daf8;
    height: 200px;
}

.center {
    background-color: #ea9999;
    height: 200px;
}

.right {
    background-color: #fff2cc;
    height: 200px;
} 
```
上記のように記述するとひとつひとつの子要素に記述しなくても親要素に記述するだけで均等にしてくれます。